原生js实现放大镜效果
2019-08-14 10:15:39来源:博客园 阅读 ()
我们平时在电商网站购物时,需要对选取的某一个商品进行详情查看,此时当鼠标在商品图片上某一部分移动查看时旁边就会出现一个该部分图片的放大效果,这样就能够更好的对商品进行分析,下面就使用原生js来实现一下类似放大镜的效果。
思路分析:
注:放大比例 = 左边盒子的大小 / 里面进行剪切的盒子大小,该比例值作为右边盒子显示内容的大小
代码如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>原生js实现图片放大镜</title> 8 <link rel="stylesheet" href="./css/style.css"> 9 </head> 10 11 <body> 12 13 <div id="wrap"> 14 <div class="pic"> 15 <img src="./images/1.jpg" alt=""> 16 <div class="zoom"></div> 17 </div> 18 <ul class="list"> 19 <li class="current"> 20 <img src="./images/1.jpg" alt=""> 21 </li> 22 <li> 23 <img src="./images/2.jpg" alt=""> 24 </li> 25 <li> 26 <img src="./images/3.jpg" alt=""> 27 </li> 28 <li> 29 <img src="./images/4.jpg" alt=""> 30 </li> 31 <li> 32 <img src="./images/5.jpg" alt=""> 33 </li> 34 <li> 35 <img src="./images/6.jpg" alt=""> 36 </li> 37 </ul> 38 <div class="details"></div> 39 40 41 <script src="./js/index.js"></script> 42 </body> 43 </html>
@charset "utf-8"; * { margin: 0; padding: 0; } li{ list-style: none; } body { background-color: #eee; } #wrap { position: relative; width: 400px; height: 480px; margin: 50px auto; border: 1px solid #888; } #wrap .pic img { width: 400px; height: 400px; } #wrap .pic .zoom { position: absolute; top: 0; left: 0; width: 150px; height: 150px; background-color: lightblue; opacity: .4; cursor: move; } #wrap .list { display: flex; margin-top: 10px; justify-content: space-around; } #wrap .list li{ cursor: pointer; } #wrap .list .current{ border: 2px solid red; } #wrap .list img { width: 50px; height: 50px; vertical-align: bottom; /* 解决图片底部留白,改变对齐方式,默认基线对齐 */ } #wrap .details { position: absolute; /* display: none; */ top: 0; left: 400px; width: 400px; height: 400px; margin-left: 20px; border: 1px solid #888; background-image: url('/images/1.jpg'); background-size: 266%; }
1 var list = document.querySelector(' .list '), 2 img = document.querySelector(' .pic img '), 3 li_list = list.querySelectorAll(' li '), 4 pic = document.querySelector(' #wrap .pic '), 5 zoom = document.querySelector(' .zoom '), 6 details = document.querySelector(' .details ') 7 8 list.addEventListener('click', function (e) { 9 e = e || window.event 10 // console.log(e.target) 11 if (e.target.tagName == 'IMG') { 12 img.src = e.target.src; 13 details.style.backgroundImage = 'url(' + e.target.src + ')'; 14 // console.log(e.target.parentNode) 15 li_list.forEach(function (item) { 16 console.log(item) 17 item.className = ''; // 每次遍历六个li元素并清除类名 18 }) 19 e.target.parentNode.className = 'current'; // 通过e.target找到其父元素并添加上类名 20 // console.log(li_list) 21 } 22 }, false) 23 24 pic.addEventListener('mousemove', function (e) { 25 e = e || window.event 26 var x = e.clientX, 27 y = e.clientY; 28 cx = pic.getBoundingClientRect().left; // getBoundingClientRect()获取某个元素相对于视窗的位置集合 29 cy = pic.getBoundingClientRect().top; 30 tx = x - cx - 75; 31 ty = y - cy - 75 32 // console.log(e) 33 // console.log(x,y) 34 // console.log(cx,cy) 35 36 // 对.zoom盒子移动范围进行限制 37 if(tx < 0){ 38 tx = 0; 39 } 40 if(tx > 250){ 41 tx = 250 42 } 43 if(ty < 0){ 44 ty = 0; 45 } 46 if(ty > 250){ 47 ty = 250 48 } 49 50 details.style.backgroundPosition = (tx / 250 * 100 + '%') + (ty / 250 * 100 + '%') 51 52 zoom.style.left = tx + 'px' 53 zoom.style.top = ty + 'px'; 54 })
最终效果:
总结:
整体先实现静态效果,然后根据需求进行一步步逻辑代码的编写,从而实现整个效果
原文链接:https://www.cnblogs.com/zsp-1064239893/p/11220932.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- js防止表单重复提交实现代码 2020-03-29
- 基于JQuery的多标签实现代码 2020-03-29
- js实现翻页后保持checkbox选中状态的实现方法 2020-03-25
- NiftyCube实现圆角边框的方法 2020-03-20
- JS实现标签页切换效果 2020-03-12
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash