模拟淘宝查看商品时图片的放大效果

要做这样的一个效果，要怎么去实现呢
模拟淘宝查看商品时图片的放大效果
首先，可以分析下整个结构，左边的是原图片，黄色区域在左边覆盖的地方，右边就会对应显示放大后的大图

静态页面

<body>
<div class="box" id="box">
    <div class="small"><!--小层-->
        <img src="images/small.png" width="350" alt=""/>
        <div class="mask"></div><!--遮挡层-->
    </div><!--小图-->
    <div class="big"><!--大层-->
        <img src="images/big.jpg" width="800" alt=""/><!--大图-->
    </div><!--大图-->
</div>
</body>

样式

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>

js部分

<script>

function my$(id){
    return document.getElementById(id);
}
    var box = my$("box");
    //获取小图的div
    var small = box.children[0];
    //获取遮挡层
    var mask = small.children[1];
    //获取大图div
    var big = box.children[1];
    //获取大图
    var bigImg = big.children[0];

    //鼠标移入事件
    box.onmouseover = function () {
        mask.style.display = "block"//让遮挡层显示
        big.style.display = "block";//让显示大图的div显示
    };
    //鼠标移出事件
    box.onmouseout = function () {
        mask.style.display = "none";//让遮挡层隐藏
        big.style.display = "none";//让显示大图的div隐藏
    }
    //移动事件
    small.onmousemove = function (e) {
        //获取鼠标此时可视区域的横纵坐标,去掉父亲的margin值
        var x = e.clientX - 100;
        var y = e.clientY - 100;


        //设置鼠标在遮挡层的中间显示
        x = x - mask.offsetWidth / 2;
        y = y - mask.offsetHeight / 2;


        //设置横纵坐标的最小值
        x = x < 0 ? 0 : x;
        y = y < 0 ? 0 : y;

         //设置横纵坐标的最大值
       x= x>small.offsetWidth-mask.offsetWidth?small.offsetWidth-mask.offsetWidth:x;
       y= y>small.offsetHeight-mask.offsetHeight？small.offsetHeight-mask.offsetHeight:y;

        //赋值给遮挡层
        mask.style.left = x + "px";
        mask.style.top = y + "px";

        //遮挡层的移动距离/大图的移动距离=遮挡层移动的最大距离/大图最大的移动距离
        //大图的移动距离=遮挡层的移动距离*大图最大的移动距离/遮挡层移动的最大距离

        //大图的最大的移动距离
        var maxX=bigImg.offsetWidth-big.offsetWidth;
        var maxY=bigImg.offsetHeight-big.offsetHeight;

        //求大图的移动距离
        var bigImgX=x*maxX/(small.offsetWidth-mask.offsetWidth);
        var bigImgY=y*maxY/(small.offsetHeight-mask.offsetHeight);

        bigImg.style.marginLeft=-bigImgX+"px";
        bigImg.style.marginTop=-bigImgY+"px";

    }
</script>

模拟淘宝查看商品时图片的放大效果

相关推荐