How to realize the effect of imitating Taobao magnifying glass by JavaScript

This article mainly shows you "JavaScript how to imitate Taobao magnifying glass effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "JavaScript how to imitate Taobao magnifying glass effect" this article.

Html code

Css code

* {margin: 0; padding: 0;} .thumbnail, .original {width: 400px; height: 400px; border: 1px solid red; position: absolute;} .original {left: 450px; overflow: hidden; display: none } .thumbnail > img {width: 400px;} .original > img {width: 800px; position: absolute;} .magnifier {cursor: move; width: 200px; height: 200px; background-color:rgba (206,198,198,0.5); position: absolute Top: 0; left: 0; display: none;}

Js code

/ / thumbnail thumbnail / / original original image / / magnifier magnifier $(".thumbnail") .mouseover (function () {$(".magnifier") .Mouseover () $(".original") .show ()}) $(".thumbnail") .mousemove (function (ev) {/ / console.log (ev) / mouse relative page x y coordinates var mx= ev.pageX; var my = ev.pageY Var tx = mx-$(".thumbnail"). Offset (). Left var ty = my-$(".thumbnail"). Offset (). Top var l = tx-$(".magnifier"). Width () / 2; var t = ty-$(".magnifier"). Height () / 2; var maxX= $(".thumbnail"). Width ()-$(".magnifier"). Width () Var maxY= $(".thumbnail") .height ()-$(".magnifier") .height () / / processing boundary if (l > maxX) {l = maxX} if (t > maxY) {t = maxY} if (l