js完成放大镜

效果展示:

js写放大镜案例


html:

<div class="wrap">
        <div class="left">
            <div class="mask"></div>
            <img src="./img/s.jpg" alt="">
        </div>
        <div class="right">
            <img src="./img/b.jpg" alt="">
        </div>
    </div>

js:

<script>
        //  mask跟随鼠标移动
        //  获取mask遮罩层
        var mask = document.querySelector('.mask')
        //  获取左边盒子
        var left = document.querySelector('.left')
        //   获取右边盒子
        var right = document.querySelector('.right')
       //   获取右边的盒子里面的大图
        var imgRight = right.querySelector('img')
        //  鼠标移入左边盒子的事件   移入时遮罩层显示 右边大图显示
        left.onmouseover = function () {
            mask.style.display = "block"
            right.style.display = "block"
        }
        //  鼠标移出左边盒子的事件   移入时遮罩层隐藏 右边大图隐藏
        left.onmouseout = function () {
            mask.style.display = "none"
            right.style.display = "none"
        }
        //  鼠标在左边盒子里面移动
        left.onmousemove = function (e) {
            // 获取鼠标当前坐标
            var x = e.clientX;
            var y = e.clientY;
            //  因为左边盒子有偏移,鼠标的位移距离要减去父元素(左边盒子)的偏移,才是真正的鼠标在左边盒子里面的位移坐标
            x = x - this.parentNode.offsetLeft;
            y = y - this.parentNode.offsetTop;
            console.log(x)
            console.log(y)
            //  鼠标只能在左边盒子内部移动产生效果,超出就不行了
            //  所以要控制鼠标坐标为小于100时 大于300时的使得遮罩层定死在左边大盒子边缘处不会跟鼠标移出去
            if (x <= 100) {
                x = 100
            }
            if (x >= 300) {
                x = 300
            }
            if (y <= 100) {
                y = 100
            }
            if (y >= 300) {
                y = 300
            }
            //  遮罩层跟随鼠标在左边盒子内移动
            mask.style.left=x-100+'px'
            mask.style.top=y-100+'px'
			//  右边大图移动显示部分,显示的部分需要移动的距离为为左边盒子内部小图的大小的两倍。
			//  往左侧 上面移动所以为负数,其他详情请查看“css精灵图”
            imgRight.style.left=-2*(x-100)+'px'
            imgRight.style.top=-2*(y-100)+'px'

        }

css:

* {
    margin: 0;
    padding: 0;
}

.wrap {
    display: flex;
}

.left {
    width: 400px;
    height: 400px;
    position: relative;
}

.left .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: rgba(116, 112, 112, 0.6);
}

.left img {
    width: 100%;
    height: 100%;
}

.right {
    width: 400px;
    height: 400px;
    margin-left: 200px;
    position: relative;
    overflow: hidden;
}

.right img {
    position: absolute;
    left: 0;
    top: 0;
}
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

chenyou123_

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值