<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 400px; border: 1px solid #ccc; margin: 100px; position: relative; } .big{ width: 400px; height: 400px; border: 1px solid #ccc; /*display: none;*/ position: absolute; top: 0; left: 410px; overflow: hidden; } .small>img{ width: 400px; height: 400px; } #fang{ width: 200px; height: 200px; background: black; opacity: 0.1; position: absolute; top: 0; left: 0; /*display: none;*/ cursor: move; } </style> </head> <body> <div class="box"> <div class="samll"> <img src="image/da1.jpg" alt=""> <div id="fang"></div> </div> <div class="big"> <img src="image/da2.jpg" alt=""> </div> </div> <script> //实现效果: //鼠标放到小图片上面的时候,后面的大盒子出现。鼠标离开的时候大盒子隐藏。 //鼠标移动的时候,大盒子内的大图片也移动。 var small = document.getElementsByClassName('samll')[0]; var oimg = document.getElementsByClassName('samll')[0].getElementsByTagName("img")[0]; var big = document.getElementsByClassName('big')[0]; var mask = document.getElementById('fang'); var box = document.getElementsByClassName('box')[0]; var img = big.children[0]; // small.onmouseover = function () { // big.style.display = 'block';//鼠标放上的时候,大盒子出现; // mask.style.display = 'block';//与鼠标同步的放大镜也同时出现; // } // small.onmouseout = function () {//鼠标离开的时候,与上面的效果反之。 // big.style.display = 'none'; // mask.style.display = 'none'; // } small.onmousemove = function (ev) { //如果mask的到父元素左边的值大于 其父元素的宽度减去放大镜的宽度。就都等于父元素的宽度-mask的宽度。 //放大镜的横坐标的值 等于当前鼠标的横坐标值减去box到其父元素左边(即浏览器)减去放大镜宽度的一半, //鼠标始终保持在放大镜的中央。 var even=ev||window.event; var le=even.clientX-box.offsetLeft; var to=even.clientY-box.offsetTop; mask.style.left =le-mask.offsetWidth/2+'px'; mask.style.top = to-mask.offsetHeight/2+'px'; // img.style.left = 500+'px'; //防止放大镜溢出 小图片盒子 //放大镜到父元素的左边的距离 如果大于 小图片的宽度 减去放大镜的宽度 即表示放大镜溢出 // 则令其等于 小图片的宽度 减去放大镜的宽度 if(mask.offsetLeft>oimg.offsetWidth-mask.offsetWidth){ mask.style.left = (oimg.offsetWidth-mask.offsetWidth)+'px'; //放大镜的Left的值如果为负,就为零 }else if(mask.offsetLeft<=0){ mask.style.left = 0+'px'; //纵坐标 同理 }if(mask.offsetTop>oimg.offsetHeight-mask.offsetHeight){ mask.style.top = (oimg.offsetHeight-mask.offsetHeight)+'px'; }else if(mask.offsetTop<=0){ mask.style.top = 0+'px'; } //移动时 大图片移动的距离 应是 鼠标移动距离 放大镜到父元素的距离乘以大图片宽高除以小图片宽高 var numX = big.offsetWidth/box.offsetWidth; var numY = big.offsetHeight/box.offsetHeight; // alert(beinum); img.style.transform = "translateX("+-mask.offsetLeft*numX+"px"+")" +"translateY("+-mask.offsetTop*numY+"px"+")"; } </script> </body> </html>
淘宝京东放大图
猜你喜欢
转载自blog.csdn.net/XinYe666666/article/details/80904519
今日推荐
周排行