时间:2021-07-01 10:21:17 帮助过:12人阅读
我们将整个布局分三个部分,第一部分为主题的小图片,将他放在整个布局的左上角;第二部分是下边的图片列表,直接跟在小图片的下边;最后一部分是放大镜显示部分,将其定位到小图片的右边。
然后就是利用js添加基本事件(包括鼠标的移入移出等)详细的内用见如下代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul{ list-style: none; padding: 0; } .zoom-box{ width: 452px; position: relative; } .small-box{ position: relative; border: 1px solid #ccc; } .small-box img{ width: 100%; height: 100%; } .small-box .square{ position: absolute; left: 0; top: 0; background: yellow; opacity: 0.5; /*display: none;*/ } .small-box .mask{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .img-list ul::after{ clear: both; content: ''; display: table; } .img-list ul li{ float: left; margin: 0 10px; padding: 6px; } .img-list img{ border: 2px solid transparent; } .img-list img.active{ border: 2px solid red; } .big-box{ position: absolute; top: 0; left: 100%; margin-left: 2px; border: 1px solid #cccccc; width: 500px; height: 500px; overflow: hidden; display: none; } .big-box img{ position: absolute; top: 0; left: 0; } </style> </head> <body> <!-- 布局--> <div><!-- 容器--> <div><!-- 小图片容器--> <img src="../img/magnifier/m1.jpg" alt=""/> <div></div><!-- 鼠标选中框--> <div></div><!-- 鼠标悬浮位置--> </div> <div><!-- 图片列表--> <ul> <li><img src="../img/magnifier/s1.jpg" alt="" data-small="../img/magnifier/m1.jpg" data-big="../img/magnifier/b1.jpg"/></li> <li><img src="../img/magnifier/s2.jpg" alt="" data-small="../img/magnifier/m2.jpg" data-big="../img/magnifier/b2.jpg"/></li> <li><img src="../img/magnifier/s3.jpg" alt="" data-small="../img/magnifier/m3.jpg" data-big="../img/magnifier/b3.jpg"/></li> <li><img src="../img/magnifier/s4.jpg" alt="" data-small="../img/magnifier/m4.jpg" data-big="../img/magnifier/b4.jpg"/></li> <li><img src="../img/magnifier/s5.jpg" alt="" data-small="../img/magnifier/m5.jpg" data-big="../img/magnifier/b5.jpg"/></li> </ul> </div> <div><!-- 放大镜--> <img src="../img/magnifier/b1.jpg" alt=""/> </div> </div> <script> //获取要操作的元素 var smallbox = $('.small-box .mask'); var smallimg = $('.small-box img'); var square = $('.square'); var bigbox = $('.big-box'); var bigimg = $('.big-box img'); var imgs = $all('.img-list img'); //鼠标经过图片列表显示被选中,实现图片切换 for(var i = 0; i < imgs.length; i++){ imgs[i].onmouseover = function(){ for(var j = 0; j < imgs.length; j++){ imgs[j].className = ''; } this.className = 'active'; //改变对应的图片链接 smallimg.src = this.getAttribute('data-small'); bigimg.src = this.getAttribute('data-big'); }; } //鼠标移入放大器显示并设置选中框的大小 smallbox.onmouseover = function(){ square.style.display = 'block'; bigbox.style.display = 'block'; //位置w/smallimg.w = bigbox.w/bigimg.w square.style.width = bigbox.offsetWidth * smallimg.offsetWidth/bigimg.offsetWidth + 'px'; square.style.height = bigbox.offsetHeight * smallimg.offsetHeight/bigimg.offsetHeight + 'px'; }; //鼠标移出放大器隐藏 smallbox.onmouseout = function(){ square.style.display = 'none'; bigbox.style.display = 'none'; }; //放大器移动 //获取鼠标的位置 smallbox.onmousemove = function(ev){ var oEvent = ev || event; var x = oEvent.offsetX - square.offsetWidth/2; var y = oEvent.offsetY - square.offsetHeight/2; if(x < 0){ x = 0; } if(x > smallbox.offsetWidth - square.offsetWidth){ x = smallbox.offsetWidth - square.offsetWidth; } if(y < 0){ y = 0; } if(y > smallbox.offsetHeight - square.offsetHeight){ y = smallbox.offsetHeight - square.offsetHeight; } //给选中框定位 square.style.left = x + 'px'; square.style.top = y + 'px'; //给放大器定位 x/? = smallimg.w/bigimg.w bigimg.style.top = -y * bigimg.offsetWidth/smallimg.offsetWidth + 'px'; bigimg.style.left = -x * bigimg.offsetHeight/smallimg.offsetHeight + 'px'; }; //通过名称查找某个元素 function $(name){ return document.querySelector(name); } //通过名称查找相同的一组数据 function $all(name){ return document.querySelectorAll(name); } </script> </body> </html>
总结:
到这里这个放大镜效果就完成了,相信小伙伴们对此也是有了自己的理解与认识,希望对你的工作有所帮助!
相关推荐:
以上就是JavaScript仿淘宝实现放大镜效果的实例的详细内容,更多请关注Gxl网其它相关文章!