购物网图片放大镜JS效果实现
每当打开购物网站，比如淘宝天猫等pc端时，看到喜欢的商品一般都会把鼠标放在左侧上面图片，这时便会呈现出放大的效果。在没有去理解分析它的原理时，感觉非常的神奇，当真正地去接触，也是非常好理解。如下图展示所见：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #zb{ width: 400px; height: 400px; border: 2px solid palevioletred; margin: 30px; background: url(https://www.qiquanji.com/mip/data/img/dmj/201904141555211663231342.jpg) no-repeat; position: relative; float: left; /*cursor 光标; crosshair 十字线 鼠标变十分架*/ cursor: crosshair; } #zb #ssk{ width: 220px; height: 200px; background: white; /*opacity 不透明 W3C的写法*/ opacity: 0.5; /*filter IE的写法 过滤; 滤除;*/ filter: alpah(opacity=60) ; /*等一下这个色块要动,就是要改变left值和top值,所以要定位*/ position: absolute; top: 0; left: 0; /* ## 右侧和左侧小色块一开始是隐藏的,鼠标移到左边小色块才显示 先隐藏*/ display: none; } /*加个没有什么用和小色块同级元素解决移动鼠标颤动的问题 因为它鼠标一移动它有子元素的话会作用到子元素身上（也就是本来作用左侧DIV，一移动就作用在子元素小色块身上了，本来是得到左大块的距离减110和100的，现在相当于小色块有事件：得到的小色块距离，是110和100，再减去110和100，等于0回到原点，然后再一动，反复颤动的问题）*/ #zb #mr{ width: 400px; height: 400px; background: red; position: absolute; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0); } #rou{ width: 440px; height: 400px; border: 2px solid darkgreen; float: left; overflow: hidden; position: relative; /* ## 右侧和左侧小色块一开始是隐藏的,鼠标移到左边小色块才显示 先隐藏*/ display: none; } #rou #dt{ position: absolute; left: 0; top: 0; } </style> <script type="text/javascript"> window.onload = function(){ var zb = document.getElementById('zb'); var ssk = document.getElementById('ssk'); var rou = document.getElementById('rou'); var dt = document.getElementById('dt'); var mr = document.getElementById('mr'); // 关于js的onmousemove与onmouseover区别over，在鼠标指针移动到指定的对象上时发生。move，在鼠标指针移动时发生。 // 给左侧加鼠标移动事件 // zb.onmousemove = function(e){ // 改成mr这个 作用在mr和zb结果是一样的,这个没有其它子元素再好理解 mr.onmousemove = function(e){ // 鼠标只要移动一下就获得鼠标的位置 就先获得事件对象 // 获得事件对象 var dd = window.event || e; // 获得div左边的距 offsetX IE的写法 这个是获得事件源左边的距离 var mouse_zb = dd.offsetX || dd.layerX; // 获得div顶部的距 var mouse_db = dd.offsetY || dd.layerY; // 在网页标题栏上面输出一下 document.title = mouse_zb +'|'+ mouse_db; // 计算色块的位置 因为这个色块是220*200的，一半就是中心点 // skz 色块左 skd色块顶 var skz = mouse_zb - 110; var skd = mouse_db -100; // 判断,不让小色块的超出去范围 if (skz<0) { skz=0; } // 这个大小180,是400减220 大块是400减去小色块的220 if (skz>180) { skz=180; } if (skd<0) { skd=0; } if (skd>200) { skd=200; } // 让色块移动 ssk.style.left = skz +'px'; ssk.style.top = skd+ 'px'; // 计算右侧图片的位置(实际上是大图片在移动)roudt右大图 var roudt_left = skz*-2; var roudt_top = skd*-2; // 让右侧图片移动 dt.style.left = roudt_left +"px"; dt.style.top = roudt_top + 'px'; } // ## 然后再给左侧DIV加移入事件--鼠标放入左图:左侧小色块显示,右侧大图显示 // 给左侧加鼠标移入事件 mr这个好了，上面理解放在这里 mr.onmouseover = function(){ // 让左侧色块和右侧DIV显示 ssk.style.display = 'block'; rou.style.display = 'block'; } // 给鼠标加移出事件 mr.onmouseout = function(){ ssk.style.display = 'none'; rou.style.display = 'none'; } } </script> </head> <body> <div id="zb"> <!--小色块--> <div id="ssk"></div> <!--加个没有什么用和小色块同级元素解决移动鼠标颤动的问题--> <div id="mr"></div> </div> <!--右边DIV--> <div id="rou"> <img src="https://www.qiquanji.com/mip/data/img/dmj/201904141555211694214302.jpg" id="dt"/> </div> </body> </html> 上面例子代码里都有详细解释，认真看应该很容易理解。
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知