Shulou(Shulou.com)06/02 Report--

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.