【JS】案例2放大镜效果

霜霖❀

于 2022-06-24 22:52:36 发布

阅读量93

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/xueyinglys/article/details/125453408

版权

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

实现京东商品放大镜效果
在这里插入图片描述
步骤：

框的moveover触发时，nask和大图的display为block，框的moveout事件触发时，mask和大图的display为none
mask的移动：①mask在框中坐标=鼠标在框中坐标-mask/2（为了让鼠标在mask的中心）②判断mask的坐标是否小于0和大于最大移动距离（框的宽度-mask的宽度）
放大框的移动：②大图移动距离 = - 大图最大移动距离/mask最大移动距离 *mask移动距离

<!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>
    <style>
        .pre-img{
            position: relative;
            display: flex;
            width: 400px;
            height: 400px;
            margin-left: 30px;
            margin-top: 30px;
            border: 1px #ccc solid;
            cursor:move
        }
        .mask{
            width: 300px;
            height: 300px;
            position: absolute;
            background: rgb(135, 135, 22, 0.4);
            display: none;
        }
        .pre-img img{
            width: 300px;
            height: 300px;
            margin: auto;
        }
        .big-img{
            width: 500px;
            height: 500px;
            display: none;
            position: absolute;
            display: flex;
            top: 30px;
            left: 480px;
            border: 1px #ccc solid;
            overflow: hidden;
        }
        .big-img .img-div{
            position: absolute;
            width: 400px;
            height: 400px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="pre-img">
        <img src="phone.jpg" alt="">
        <div class="mask"></div>
    </div>
    <div class="big-img">
        <div class="img-div">
            <img src="phone.jpg">
        </div>
    </div>
    <script>
        var preImg = document.querySelector('.pre-img')
        var mask = document.querySelector('.mask')
        var bigDiv = document.querySelector('.big-img')
        var  bigImg = document.querySelector('.img-div')

        preImg.addEventListener('mouseover', function(){
            mask.style.display = 'block'
            bigDiv.style.display = 'block'
        })
        preImg.addEventListener('mouseout', function(){
            mask.style.display = 'none'
            bigDiv.style.display = 'none'
        })
        preImg.addEventListener('mousemove', function(e){
            //1.获取鼠标在框中坐标
            var moveX = e.pageX - preImg.offsetLeft;
            var moveY = e.pageY - preImg.offsetTop;
            //2.mask在框中坐标
            //mask宽度
            var maskWidth = mask.offsetWidth;
            var maskX = moveX - maskWidth/2;
            var maskY = moveY - maskWidth/2;
            //mask在框中最大移动距离
            var maskMax = preImg.offsetWidth - mask.offsetWidth;
            //判断鼠标拖动mask时是否超出框的边界
            if(maskX<0){
                maskX = 0;
            }else if(maskX>maskMax){
                maskX=maskMax
            }
            if(maskY<0){
                maskY = 0
            }else if(maskY>maskMax){
                maskY = maskMax
            }
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';
            //3.放大框的移动
            // radio = 大图最大移动距离/mask最大移动距离
            //大图移动距离 = - radio * mask移动距离（朝相反方向移动）
            //大图移动距离
            var bigMax = bigDiv.offsetWidth - bigImg.offsetWidth;
            
            var radio = bigMax / maskMax;
            var bigMovex = radio*maskX;
            var bigMovey = radio*maskY;

            bigImg.style.left = - bigMovex + 'px';
            bigImg.style.top = - bigMovey + 'px';
        })
    </script>
</body>
</html>