商品图片放大镜效果

2020-02-06 11:39:50 阅读：302 来源： 互联网

标签：style 效果放大镜 big mask var small offsetWidth 图片

京东商品页面中的放大镜效果实现

技术：：html+ css + js

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品图片放大镜</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        img {
            vertical-align: top;
        }

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

        .big {
            position: absolute;
            width: 450px;
            height: 450px;
            top: 0;
            left: 355px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .small {
            position: relative;
        }
        .mask {
            width: 100px;
            height: 100px;
            background-color: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }

        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box" id="fdj">
    <div class="small" id="small">
        <img src="images/small.jpg" alt="">
        <div class="mask" id="mask"></div>
    </div>
    <div class="big" id="big">
        <img src="images/big.jpg" alt="">
    </div>
</div>
</body>
</html>

<script>
    var fdj = document.getElementById("fdj");
    var small = fdj.children[0];
    var big = fdj.children[1];
    var mask = document.getElementById("mask");
    var bigImg = big.children[0];

    small.onmouseover = function () {
        big.style.display = "block";
        mask.style.display = "block";
    }

    small.onmouseout = function () {
        big.style.display = "none";
        mask.style.display = "none";
    }

    //鼠标在小盒子中移动
    var x = 0, y = 0;
    small.onmousemove = function (event) {
        var event = event || window.event;
        x = event.clientX  - this.offsetParent.offsetLeft  - mask.offsetWidth / 2;
        y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight / 2;
        //四个判断放置小黄盒子拖动越界
        if (x < 0) {
            x = 0;
        }
        if (x > small.offsetWidth - mask.offsetWidth) {
            x = small.offsetWidth  - mask.offsetWidth;
        }
        if (y < 0) {
            y = 0;
        }
        if (y >small.offsetHeight - mask.offsetHeight) {
            y = small.offsetHeight - mask.offsetHeight;
        }
        mask.style.left = x + "px";
        mask.style.top = y + "px";

        //根据比例移动大盒子的位置，实现放大效果
        bigImg.style.left = -x * big.offsetWidth /small.offsetWidth  +"px";
        bigImg.style.top = -y * big.offsetWidth /small.offsetWidth  +"px";
    }

</script>

进阶的民工发布了58 篇原创文章 · 获赞 46 · 访问量 6万+ 私信关注

标签：style,效果,放大镜,big,mask,var,small,offsetWidth,图片
来源： https://blog.csdn.net/SoWhatWorld/article/details/104193649

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

商品图片放大镜效果