如何用JavaScript实现类似京东的图片放大镜效果？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1370个文字，预计阅读时间需要6分钟。
本例中，大家分享了实现JavaScript创建东方放大镜效果的完整代码，并提供参考。整体内容如下：
需要实现的效果如图所示：
布局：布局采用布局，首先使用一个大的盒子将整体内容包裹，然后在这个大盒子内部先分为上下两个部分。
本文实例为大家分享了JS实现京东放大镜效果的具体代码，供大家参考，具体内容如下
需要实现的效果图如下：
①布局：布局采用一个大盒子里面首先分为上下两个部分，然后下部分又分为左右两个部分。左边的盒子里面放了一个img和一个遮罩层cover，右边盒子里面放的是800*800的大图片，这里提供左边的图片b3.png和右边的大图片big.jpg:
注意：左边盒子里面的cover采用绝对定位，右边盒子里面的img采用绝对定位。
②功能实现：主要有三个功能模块：
1.鼠标经过（mouseover）左边盒子，黄色的遮罩层以及右边盒子显示，鼠标离开（mouseout）则隐藏黄色遮罩层以及右边盒子。
2.黄色遮罩层跟随鼠标移动（mousemove）。鼠标在盒子的坐标=鼠标在页面的坐标-左边盒子在页面的坐标，但是又因为鼠标是在遮罩层的中间，所以最终的坐标要减去遮罩层一半的高度和宽度。注意这里有边界条件：就是黄色遮罩层的移动距离，黄色遮罩层的x方向的移动距离不能小于0且不能大于左边盒子宽度减去遮罩层的宽度。
3.移动黄色遮罩层，大图片跟随移动功能。大图片移动的距离根据下面这个公式来进行计算：
遮挡层的移动距离上一点已经算过了，遮罩层的最大移动距离上面也说了，剩下的就是大图片最大移动距离，大图片最大移动距离=图片的大小-右边盒子的大小。
最后全部代码如下：
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东放大镜效果</title> <script src="../js/index.js"></script> <style> * { margin: 0; padding: 0; } ul li { list-style: none; } /* 外面大盒子 */ .container { box-sizing: border-box; width: 1200px; height: 500px; /* background-color: pink; */ margin: 200px auto; } .container .topbox { width: 100%; height: 60px; /* background-color: violet; */ border-bottom: 2px solid #bc2815; } .container .topbox ul { margin-left: 10px; } .container .topbox ul li { float: left; font-size: 22px; color: #4e535b; padding: 15px 20px; } .container .topbox ul li:hover { color: white; background-color: #bc2815; } .container .topbox ul li:first-child { color: white; background-color: #bc2815; } .container .bottombox .leftbox { float: left; height: 400px; width: 400px; /* background-color: violet; */ margin-top: 10px; } .container .bottombox .leftbox ul { overflow: hidden; margin-left: 10px; } .container .bottombox .leftbox ul li { float: left; font-size: 14px; color: #4e535b; } .container .bottombox .leftbox .leftphone { position: relative; overflow: hidden; width: 400px; height: 400px; /* background-color: pink; */ margin-top: 5px; margin-left: 10px; border: 1px solid #c8cbc8; } .leftbox .leftphone img { width: 100%; height: 100%; } .container .bottombox .leftbox .leftphone .cover { position: absolute; display: none; top: 0; left: 0; width: 220px; height: 220px; background-color: #ffeba2; opacity: 0.5; border: 1px solid #ccc; cursor: move; } .container .bottombox .rightbox { float: left; margin-top: 10px; width: 420px; height: 420px; margin-left: 20px; /* background-color: violet; */ } .container .bottombox .rightbox { position: relative; display: none; border: 1px solid #ccc; overflow: hidden; } .container .bottombox .rightbox img { position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="container"> <div class="topbox"> <ul> <li>全部商品分类</li> <li>服装城</li> <li>美妆馆</li> <li>传智超市</li> <li>全球购</li> <li>闪购</li> <li>团购</li> <li>拍卖</li> <li>有趣</li> </ul> </div> <div class="bottombox"> <div class="leftbox"> <div class="leftnav"> <ul> <li>手机、数码、通讯 ></li> <li>手机 ></li> <li>Apple苹果 ></li> <li>iphone 6S Plus系统 </li> </ul> <div class="leftphone"> <img src="../b3.png" alt=""> <div class="cover"></div> </div> </div> </div> <div class="rightbox"> <img src="../big.jpg" alt="" class="big"> </div> </div> </div> </body> </html>
外部js文件：
window.addEventListener('load', function() { // 获取元素 var cover = this.document.querySelector('.cover'); var leftphone = this.document.querySelector('.leftphone'); var rightbox = this.document.querySelector('.rightbox'); var big = this.document.querySelector('.big'); // 鼠标移动到左边的手机上的时候遮罩层和右边的手机显示出来 leftphone.addEventListener('mouseover', function() { cover.style.display = 'block' rightbox.style.display = 'block' }) // 鼠标移离开到左边的手机上的时候遮罩层和右边的手机隐藏 leftphone.addEventListener('mouseout', function() { cover.style.display = 'none' rightbox.style.display = 'none' }) leftphone.addEventListener('mousemove', function(e) { var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; // x的移动距离 var totalx = x - cover.offsetWidth / 2; var totaly = y - cover.offsetHeight / 2 if (totalx < 0) { totalx = 0; } else if (totalx >= leftphone.offsetWidth - cover.offsetWidth) { totalx = leftphone.offsetWidth - cover.offsetWidth; } if (totaly < 0) { totaly = 0; } else if (totaly >= leftphone.offsetHeight - cover.offsetHeight) { totaly = leftphone.offsetHeight - cover.offsetHeight; } cover.style.left = totalx + 'px'; cover.style.top = totaly + 'px'; // imgmaxx是图片最大x移动距离 var imgmaxx = rightbox.offsetWidth - big.offsetWidth; var imgmaxy = rightbox.offsetHeight - big.offsetHeight; var imgmovex = totalx * imgmaxx / (leftphone.offsetWidth - cover.offsetWidth) var imgmovey = totaly * imgmaxy / (leftphone.offsetHeight - cover.offsetHeight) big.style.left = imgmovex + 'px'; big.style.top = imgmovey + 'px'; }) })
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。
本文共计1370个文字，预计阅读时间需要6分钟。
本例中，大家分享了实现JavaScript创建东方放大镜效果的完整代码，并提供参考。整体内容如下：
需要实现的效果如图所示：
布局：布局采用布局，首先使用一个大的盒子将整体内容包裹，然后在这个大盒子内部先分为上下两个部分。
本文实例为大家分享了JS实现京东放大镜效果的具体代码，供大家参考，具体内容如下
需要实现的效果图如下：
①布局：布局采用一个大盒子里面首先分为上下两个部分，然后下部分又分为左右两个部分。左边的盒子里面放了一个img和一个遮罩层cover，右边盒子里面放的是800*800的大图片，这里提供左边的图片b3.png和右边的大图片big.jpg:
注意：左边盒子里面的cover采用绝对定位，右边盒子里面的img采用绝对定位。
②功能实现：主要有三个功能模块：
1.鼠标经过（mouseover）左边盒子，黄色的遮罩层以及右边盒子显示，鼠标离开（mouseout）则隐藏黄色遮罩层以及右边盒子。
2.黄色遮罩层跟随鼠标移动（mousemove）。鼠标在盒子的坐标=鼠标在页面的坐标-左边盒子在页面的坐标，但是又因为鼠标是在遮罩层的中间，所以最终的坐标要减去遮罩层一半的高度和宽度。注意这里有边界条件：就是黄色遮罩层的移动距离，黄色遮罩层的x方向的移动距离不能小于0且不能大于左边盒子宽度减去遮罩层的宽度。
3.移动黄色遮罩层，大图片跟随移动功能。大图片移动的距离根据下面这个公式来进行计算：
遮挡层的移动距离上一点已经算过了，遮罩层的最大移动距离上面也说了，剩下的就是大图片最大移动距离，大图片最大移动距离=图片的大小-右边盒子的大小。
最后全部代码如下：
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东放大镜效果</title> <script src="../js/index.js"></script> <style> * { margin: 0; padding: 0; } ul li { list-style: none; } /* 外面大盒子 */ .container { box-sizing: border-box; width: 1200px; height: 500px; /* background-color: pink; */ margin: 200px auto; } .container .topbox { width: 100%; height: 60px; /* background-color: violet; */ border-bottom: 2px solid #bc2815; } .container .topbox ul { margin-left: 10px; } .container .topbox ul li { float: left; font-size: 22px; color: #4e535b; padding: 15px 20px; } .container .topbox ul li:hover { color: white; background-color: #bc2815; } .container .topbox ul li:first-child { color: white; background-color: #bc2815; } .container .bottombox .leftbox { float: left; height: 400px; width: 400px; /* background-color: violet; */ margin-top: 10px; } .container .bottombox .leftbox ul { overflow: hidden; margin-left: 10px; } .container .bottombox .leftbox ul li { float: left; font-size: 14px; color: #4e535b; } .container .bottombox .leftbox .leftphone { position: relative; overflow: hidden; width: 400px; height: 400px; /* background-color: pink; */ margin-top: 5px; margin-left: 10px; border: 1px solid #c8cbc8; } .leftbox .leftphone img { width: 100%; height: 100%; } .container .bottombox .leftbox .leftphone .cover { position: absolute; display: none; top: 0; left: 0; width: 220px; height: 220px; background-color: #ffeba2; opacity: 0.5; border: 1px solid #ccc; cursor: move; } .container .bottombox .rightbox { float: left; margin-top: 10px; width: 420px; height: 420px; margin-left: 20px; /* background-color: violet; */ } .container .bottombox .rightbox { position: relative; display: none; border: 1px solid #ccc; overflow: hidden; } .container .bottombox .rightbox img { position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="container"> <div class="topbox"> <ul> <li>全部商品分类</li> <li>服装城</li> <li>美妆馆</li> <li>传智超市</li> <li>全球购</li> <li>闪购</li> <li>团购</li> <li>拍卖</li> <li>有趣</li> </ul> </div> <div class="bottombox"> <div class="leftbox"> <div class="leftnav"> <ul> <li>手机、数码、通讯 ></li> <li>手机 ></li> <li>Apple苹果 ></li> <li>iphone 6S Plus系统 </li> </ul> <div class="leftphone"> <img src="../b3.png" alt=""> <div class="cover"></div> </div> </div> </div> <div class="rightbox"> <img src="../big.jpg" alt="" class="big"> </div> </div> </div> </body> </html>
外部js文件：
window.addEventListener('load', function() { // 获取元素 var cover = this.document.querySelector('.cover'); var leftphone = this.document.querySelector('.leftphone'); var rightbox = this.document.querySelector('.rightbox'); var big = this.document.querySelector('.big'); // 鼠标移动到左边的手机上的时候遮罩层和右边的手机显示出来 leftphone.addEventListener('mouseover', function() { cover.style.display = 'block' rightbox.style.display = 'block' }) // 鼠标移离开到左边的手机上的时候遮罩层和右边的手机隐藏 leftphone.addEventListener('mouseout', function() { cover.style.display = 'none' rightbox.style.display = 'none' }) leftphone.addEventListener('mousemove', function(e) { var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; // x的移动距离 var totalx = x - cover.offsetWidth / 2; var totaly = y - cover.offsetHeight / 2 if (totalx < 0) { totalx = 0; } else if (totalx >= leftphone.offsetWidth - cover.offsetWidth) { totalx = leftphone.offsetWidth - cover.offsetWidth; } if (totaly < 0) { totaly = 0; } else if (totaly >= leftphone.offsetHeight - cover.offsetHeight) { totaly = leftphone.offsetHeight - cover.offsetHeight; } cover.style.left = totalx + 'px'; cover.style.top = totaly + 'px'; // imgmaxx是图片最大x移动距离 var imgmaxx = rightbox.offsetWidth - big.offsetWidth; var imgmaxy = rightbox.offsetHeight - big.offsetHeight; var imgmovex = totalx * imgmaxx / (leftphone.offsetWidth - cover.offsetWidth) var imgmovey = totaly * imgmaxy / (leftphone.offsetHeight - cover.offsetHeight) big.style.left = imgmovex + 'px'; big.style.top = imgmovey + 'px'; }) })
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。