商品放大镜的效果的实现！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了商品放大镜的效果的实现！相关的知识，希望对你有一定的参考价值。
需求：商品展示图片的放大效果，
运用技术：onmousemove,event事件，event.clientX,event.clientY,简单的实现商品放大效果，
tips：可以下载源码直接放到编辑器里面看效果，请注意需要往class为img的img标签里添加图片地址，这样就可以实现一个简单的放大镜效果了，
源码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width:800px; height:600px; border:1px solid #000; position:relative; float:left; margin:0 50px; } img{ width:800px; height:600px; } .box div{ width:200px; height:200px; background-color: rgba(225,225,225,.5); position:absolute; left:0; right:0; display: none; overflow: hidden; border-radius: 100px; box-shadow: 0px 0px 5px #000; border:1px solid #000; cursor: pointer; } .showBox{ width:400px; height:400px; border:1px solid #000; float: left; margin-top:150px; position: relative; overflow: hidden; border-radius: 200px; } .move{ position:absolute; left:0; top:0; } .foloow{ position:absolute; top:0; left:0; } </style> </head> <body> <div class="box"> <img src="img/5.jpg" alt="" class = "img"/> <div> <img src="" alt="" class="foloow" /> </div> </div> <div class="showBox"><img src="" alt="" class ="move"/></div> </body> <script type="text/javascript"> // 获取元素，大盒子 var box = document.querySelector(‘.box‘); // 获取放大镜 var div = document.querySelector(‘.box div‘); // 获取显示放大镜的盒子 var showBox = document.querySelector(‘.showBox‘); // 获取放大镜内部的图片 var floow = document.querySelector(‘.foloow‘); // 获取需要移动的放大镜盒子里面的图片 var move = document.querySelector(‘.move‘); var img = document.querySelector(‘.img‘); // 获取盒子内部的图片地址 var src = img.src; box.onmousedown = function(ev){ ev.preventDefault(); } box.onmousemove = function(ev){ ev.preventDefault(); // 放大镜显示 div.style.display = ‘block‘; // 获取光标x轴位置 var x = ev.clientX; // 获取光标Y轴位置 var y = ev.clientY; // 获取光标X轴需要移动的距离 var l = x - box.offsetLeft - div.offsetWidth/2 - this.clientLeft; // 获取光标Y轴需要移动的距离 var t = y - box.offsetTop - div.offsetHeight/2 - this.clientTop; // 左边缘处理 if(l<=0){ l=0; } //右边缘处理 if(l>=box.clientWidth-div.offsetWidth){ l = box.clientWidth-div.offsetWidth; } // 上边缘处理 if(t<=0){ t=0; } // 下边缘处理 if(t>=box.clientHeight-div.offsetHeight){ t = box.clientHeight-div.offsetHeight; } // 动态调整放大镜内部图片的尺寸以及地址 floow.src = src; floow.style.width = box.offsetWidth+‘px‘; floow.style.height = box.offsetHeight +‘px‘; // 延时定时器突出放大镜效果 setTimeout(function(){ // 放大镜内部图片移动距离 floow.style.left = -l +‘px‘; floow.style.top = -t +‘px‘; },20); // 光标移动距离 div.style.left = l + ‘px‘; div.style.top = t + ‘px‘; // 动态调整放大镜显示框的地址以及储存 move.src = src; // 获取放大镜框与放大镜之间的比例 显示放大镜盒子的边长X4 除以放大镜盒子的边长X4； var num = ((showBox.clientHeight*2)+(showBox.clientWidth*2))/((div.clientHeight*2)+(div.clientWidth*2)); move.style.width = num*box.clientWidth +‘px‘;// 动态设置放大镜盒子内部图片的大小 move.style.height = num*box.clientHeight+‘px‘;// 动态设置放大镜盒子内部图片的大小 move.style.left = -l*num+‘px‘;// 移动放大镜盒子里面图片的位置 move.style.top = -t*num+‘px‘;// 移动放大镜盒子里面图片的位置 } box.onmouseout = function(){ div.style.display = ‘none‘; move.src = ‘‘; } </script> </html>
以上是关于商品放大镜的效果的实现！的主要内容，如果未能解决你的问题，请参考以下文章