本文实例为大家分享了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';
?
? ? })
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did124430