凡客放大镜效果分析

最新推荐文章于 2026-01-10 21:33:29 发布

转载最新推荐文章于 2026-01-10 21:33:29 发布 · 264 阅读

收录于

web

在淘宝、天猫、凡客这样的电商网站都会见到放大镜的效果，对衣服进行放大，便于顾客更加具体地了解衣服的细节。对于这个效果的布局来说，较为简单，主要还是JS代码部分比较考验逻辑。

JS部分：

思路很重要，鼠标放进来，获得鼠标的位置，计算透明块的位置，改变透明块的left和top值。

然后计算右边图片的位置，改变右边大图的left和top值。最后再加个鼠标移入移出事件。

总的代码如下吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>凡客放大镜效果</title>
    <style type="text/css">
        #left{
            width: 400px;
            height: 400px;
            position: relative;
            float: left;
            border: 3px solid blue;
            margin: 20px;
            background: url(https://blog.csdn.net/400.jpg) no-repeat;
            cursor: crosshair;
        }
        #box{
            width: 220px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: white;
            opacity: 0.8;
            display: none;
        }
        #right{
            width: 440px;
            height: 400px;
            position: relative;
            float: left;
            overflow: hidden;
            display: none;
        }
        #pic{
        position: absolute;
        left: 0;
        top: 0;
        }
        #cover{
        width: 400px;
        height: 400px;
        position: absolute;
        left:0;
        top: 0;
        opacity: 0;
        }
    </style>
</head>
<body>
<div id="left">
    <div id="box">
    </div>
    <div id="cover">
    </div>
</div>
<div id="right">
    <img src="800.jpg" alt="" id="pic">
</div>
<script>
    var left = document.getElementById("left");
    var box  = document.getElementById("box");
    var right = document.getElementById("right");
    var pic = document.getElementById("pic");
    var cover = document.getElementById("cover");
    // 给左侧框加鼠标移动事件
    cover.onmousemove = function (e) {
        var ev = window.event || e;
        var mouse_left = ev.offsetX || ev.layerX;
        var mouse_top = ev.offsetY || ev.layerY;
        document.title=mouse_left + '|'+ mouse_top;
        // 计算色块的位置
        var box_left = mouse_left - 110;
        var box_top = mouse_top - 100;
        if(box_left < 0){
            box_left = 0;

        }else if(box_left > 180){
            box_left = 180;

        }
        if(box_top < 0){
            box_top = 0;
        }else if(box_top > 200){
            box_top = 200;
        }
        // 让色块移动(改变色块的left和top)
        box.style.left = box_left + 'px';
        box.style.top = box_top + 'px';
        // 计算右边大图的位置
        var pic_left = box_left * -2;
        var pic_top = box_top * -2;
        // 让大图移动（改变右边大图的left和top值）
        pic.style.left = pic_left + 'px';
        pic.style.top = pic_top + 'px';
        // 给左边框加鼠标移入事件
        cover.onmouseover = function () {
            box.style.display = "block";
            right.style.display = "block";
        }
        // 给左边框加鼠标移出事件
        cover.onmouseout = function () {
            box.style.display = "none";
            right.style.display = "none";
        }
    }
</script>
</body>
</html>