Rumah > Artikel > hujung hadapan web > javascript仿淘宝商品详情放大镜效果
我们经常逛淘宝的时候到淘宝商品详情看的时候,会经常使用到商品图片的放大镜功能,以前一直不知道怎么实现,遇到基本上都是网上找代码改,今天就用原生的js实现以下放大镜效果。
实现原理:
准备好大图(清晰的)和小图,两张图片必须一样只是放大或者缩小了而已,鼠标移入小缩略图的时候,上面的小图显示相应的图片,当鼠标移入上面的小图的时候,显示zoom和大图的box,然后鼠标在里面移动的时候通过 //鼠标到可视化窗口左边的距离减去小图遮罩层的一半宽度则为zomm的left的值,同理可以求top的值
zoom.style.left = event.clientX - zoom.offsetWidth/2 + “px”;
zoom.style.top = event.clientY - zoom.offsetHeight/2 + “px”;
然后用大图的尺寸除以小图的尺寸,那么就可以得出两个图片的放大比,当鼠标在左边的小图上移动的时候,通过放大比,就可以求出右边大图要向左或者上偏移的值。即可得出想要的结果。
//左边小遮罩层left的值乘以图片之间的放大倍数,则为右边大图片的left偏移值,top同理
bigimg.style.left = “-” + zoom.offsetLeft*scale + “px”;
bigimg.style.top = “-” + zoom.offsetTop*scale + “px”;
直接上代码:
html部分:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript防淘宝放大镜效果</title> <style> *{padding:0;margin:0;} #box{margin:10px 0 0 10px;} #box .smallbox{position:relative;height:327px;width:300px;} #box .bigbox{display:none;position:absolute;left:310px;top:0;height:327px;width:300px;overflow:hidden;} #box .bigbox img{position:relative;} #box .zoom{display:none;position:absolute;height:100px;width:100px;background:#000;opacity:0.75;} #box .item{margin-top:5px;font-size:0;} #box .item img{height:70px;width:70px;margin-right:6px;} </style></head><body> <p class="scale-img" id="box"> <p class="wrapbox"> <!--左边小图片--> <p class="smallbox"> <!--放大镜小层--> <p class="zoom"></p> <img src="s-1.png" class="smallimg"> <!--右边大图片--> <p class="bigbox"> <img src="b-1.png" class="bigimg"> </p> </p> <p class="item"> <img src="s-1.png" date-num = "1"> <img src="s-2.png" date-num = "2"> <img src="s-3.png" date-num = "3"> <img src="s-4.png" date-num = "4"> </p> </p> </p></body></html>
javascript部分:
(function(){ //预先加载大图,避免后面鼠标移入后显示大图时再去请求资源,影响体验 new Image().src = "b-1.png"; new Image().src = "b-2.png"; new Image().src = "b-3.png"; new Image().src = "b-4.png"; var smallbox = document.querySelector("#box .smallbox"); //小图片box var bigbox = document.querySelector("#box .bigbox"); //大图片box var smallimg = smallbox.querySelector(".smallimg"); //小图片 var bigimg = bigbox.querySelector(".bigimg"); //大图片 var zoom = document.querySelector(".zoom"); var itemImg = document.querySelectorAll("#box .item img"); for(var i = 0, len = itemImg.length; i < len; i++){ (function(j){ itemImg[j].onmouseenter = function(){ var imgSrc = this.src; smallimg.src = imgSrc; bigimg.src = "b-" + (j+1) + ".png"; } })(i); } //鼠标移入事件 smallbox.onmouseenter = function(event){ zoom.style.display = "block"; bigbox.style.display ="block"; //注意:offsetWdith的值是要元素为可视状态下才可以计算出来,不然当display:none的时候则为0; var scale = bigimg.offsetWidth/smallimg.offsetWidth; //放大倍数 var ev = event || window.event; //鼠标在内部移动的时候 this.onmousemove = function(event){ //鼠标到可视化窗口左边的距离减去小图遮罩层的一半宽度则为zomm的left的值,同理可以求top的值 zoom.style.left = event.clientX - zoom.offsetWidth/2 + "px"; zoom.style.top = event.clientY - zoom.offsetHeight/2 + "px"; //如果向左向上移动小于0,那么则设置left为0,实现紧贴着边框效果 if(zoom.offsetLeft <= 0){ zoom.style.left = 0; } if(zoom.offsetTop <= 0){ zoom.style.top = 0; } //如果向右向下移动小于0,那么则设置top,实现紧贴着边框效果 if(zoom.offsetLeft >= smallbox.offsetWidth - zoom.offsetWidth){ zoom.style.left = smallbox.offsetWidth - zoom.offsetWidth + "px"; } if(zoom.offsetTop >= smallbox.offsetHeight - zoom.offsetHeight){ zoom.style.top = smallbox.offsetHeight - zoom.offsetHeight + "px"; } //左边小遮罩层left的值乘以图片之间的放大倍数,则为右边大图片的left偏移值,top同理 bigimg.style.left = "-" + zoom.offsetLeft*scale + "px"; bigimg.style.top = "-" + zoom.offsetTop*scale + "px"; } } //鼠标移出事件 smallbox.onmouseleave = function(){ bigbox.style.display = "none"; zoom.style.display = "none"; this.onmousemove = null; } }());
相关推荐:
Atas ialah kandungan terperinci javascript仿淘宝商品详情放大镜效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!