仿京东放大镜效果（pink老师版）

最新推荐文章于 2022-09-07 12:23:27 发布

周百万.

最新推荐文章于 2022-09-07 12:23:27 发布

阅读量1.1k

点赞数 2

本文链接：https://blog.csdn.net/m0_45142186/article/details/125550378

版权

html 同时被 3 个专栏收录

37 篇文章 20 订阅

订阅专栏

javascript

28 篇文章 2 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

首先简单定义一下HTML和CSS，这都不是重点，重点是学习javascript

   <style>
        div {
            box-sizing: border-box;
        }
        
        .content {
            width: 1000px;
            height: 600px;
            margin: 0 auto;
            margin-top: 100px;
        }
        
        .left {
            position: relative;
            float: left;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }
        
        .left img {
            width: 100%;
        }
        
        .right {
            overflow: hidden;
            position: relative;
            display: none;
            float: left;
            width: 600px;
            height: 736px;
            border: 1px solid #ccc;
        }
        
        .right img {
            position: absolute;
            top: 40px;
            left: 50px;
            height: 636px;
        }
        
        span {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: rgb(193, 193, 33);
            opacity: .5;
            display: none;
        }
    </style>
    <script src="放大2.js"></script>
</head>

<body>
    <div class="content">
        <div class="left">
            <img src="phonemin.jpg" alt="">
            <span id="span"></span>
        </div>
        <div class="right">
            <img src="phonebig.png" alt="" class="rightImg">
        </div>
    </div>
</body>

就会有这样的效果

二、js部分

步骤及注意点

1.采用load让所有代码加载完毕后，再执行JS代码，就不用把JS代码写到后面了

2、当鼠标移入移出left盒子时，span和right显示与隐藏（也就是前面用left作为目标对象的原因）

3、当鼠标在left盒子中移动时，获取他在left中的坐标

e.pageX - left.offsetLeft: 鼠标在页面中的位置 - left盒子最左侧在页面中的距离（因为此处left盒子父级元素没有定位所以他的offsetLeft大小就是页面的距离）

4、将上面的值赋值给span遮罩盒子的top和left （因为span就是用定位做的，所以不用额外给）——鼠标在left盒子中的位置与span遮罩的左上角重合

5、上述有些许的不好看，所以就让鼠标在盒子中的位置 - span遮罩盒子的一半大小，因此鼠标在left中的位置，就是span中间的位置。

注意：此时的位置坐标还是鼠标在盒子中的位置。尽管他的位置发生了变化，但是在上述中减去了大小（e.pageX - left.offsetLeft - span.offsetWidth / 2 = 鼠标在盒子中的位置）

6、用 if else 语句限制一下span盒子的位置，不让他的能移动的位置超出left盒子

注意：如果单纯的只考虑如果 left<=0,让 left = 0; 但是此时他的上下还是可以超出边界的！！

如果在前面加上：如果left<=0 & top<=0 -->left = 0;top = 0;这样就会既让left不会越界，top也不会越界，剩下的原理相似

7、右边的大盒子跟着小盒子按照相应的比例走

大盒子应走的距离 / 大盒子能最大走的距离 = span盒子应走的距离 / span盒子能走的最大距离

--->大盒子应走的距离 = 大盒子能最大走的距离 * span盒子应走的距离 / span盒子能走的最大距离

8、直接给right盒子中的图片赋值是不起作用的，要给right盒子中的图片绝对定位才行

9、给right盒子中图片赋值时，给shouldX 和 shouldY 负值，这样效果更好

10、当鼠标在left盒子左上角时，给right盒子中的图片传递的位置为top:0;left:0;这样就让right盒子中的图片贴近right盒子左上角，这样span盒子再向右移动时，right盒子中的图片就会超出。
让鼠标在left左上角时，让right盒子中的图片靠近右下角，这样再按比例来移动时，图像不会超出right盒子

window.addEventListener('load', function() {
    var left = this.document.querySelector('.left');
    var right = this.document.querySelector('.right');
    var span = this.document.querySelector('span');
    //1、 当鼠标移入left盒子时，span和right显示
    left.addEventListener('mouseover', function() {
        span.style.display = 'inline-block';
        right.style.display = 'block';
    });
    left.addEventListener('mouseout', function() {
        span.style.display = 'none';
        right.style.display = 'none';
    });
    // 2、让span盒子能随着鼠标在left中的移动而移动
    // （1）当鼠标移动时获取鼠标在left盒子中的位置
    left.addEventListener('mousemove', function(e) {
        var x = e.pageX - left.offsetLeft;
        var y = e.pageY - left.offsetTop;
        // (2)把x,y赋值给span的位置
        // span.style.left = x + 'px';
        // span.style.top = y + 'px';
        // (3)出现问题，鼠标总是在span盒子的左上角移动，要把他移动到span盒子的中间
        // 往右下角平移了一段距离，总体还是鼠标在盒子中的距离
        var hleft = x - span.offsetWidth / 2;
        var htop = y - span.offsetHeight / 2;
        // span.style.left = hleft + 'px';
        // span.style.top = htop + 'px';
        // (4)不让span盒子出left的边界
        if (hleft <= 0 & htop <= 0) {
            hleft = 0;
            htop = 0
        } else if (hleft <= 0 & htop >= 200) {
            hleft = 0;
            htop = 200;
        } else if (hleft >= 200 & htop <= 0) {
            hleft = 200;
            htop = 0;
        } else if (hleft >= 200 & htop >= 200) {
            hleft = 200;
            htop = 200;
        } else if (hleft <= 0) {
            hleft = 0;
        } else if (hleft >= 200) {
            hleft = 200;
        } else if (htop <= 0) {
            htop = 0
        } else if (htop >= 200) {
            htop = 200;
        }
        console.log(hleft, htop);
        span.style.left = hleft + 'px';
        span.style.top = htop + 'px';
        // 3、让大盒子跟着span盒子移动相应比例距离
        // 3.1 大盒子最大移动距离
        var rightImg = document.querySelector('.rightImg');
        var bigMaxX = right.offsetWidth - rightImg.offsetWidth;
        var bigMaxY = right.offsetHeight - rightImg.offsetHeight;
        // right盒子应该移动的距离 = span移动的距离 * right最大移动距离 / span最大移动距离
        var shouldX = hleft * bigMaxX / (left.offsetWidth - span.offsetWidth);
        var shouldY = htop * bigMaxY / (left.offsetHeight - span.offsetHeight);

        console.log('shouldX ' + shouldX);
        console.log('shouldY ' + shouldY);
        //当鼠标在left盒子左上角时，给right盒子中的图片传递的位置 为top:0;left:0;这样就让right盒子中的图片贴近right盒子左上角，这样span盒子再向右移动时，right盒子中的图片就会超出。
        //让鼠标在left左上角时，让right盒子中的图片靠近右下角，这样再按比例来移动时，图像不会超出right盒子
        rightImg.style.left = -shouldX + 85 + 'px';
        rightImg.style.top = -shouldY + 100 + 'px';
    })


})