js实现淘宝京东购物网站商城商品的鼠标经过放大镜效果

最新推荐文章于 2021-01-06 15:29:13 发布

本地是好的

最新推荐文章于 2021-01-06 15:29:13 发布

阅读量396

点赞数 1

分类专栏： js_实例

本文链接：https://blog.csdn.net/qq_40958876/article/details/89854087

版权

js_实例专栏收录该内容

21 篇文章 0 订阅

订阅专栏

js实现淘宝京东购物网站商城商品的鼠标经过放大镜效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 250px;
            height: 250px;
            position: relative;
            margin-left: 100px;
            margin-top: 100px;
        }

        .inner {
        	/* 镜片宽度x/小图宽度=显示大图宽度/大图实际宽度 */
            /* x/250=300/500 */
            width: 150px;
            height: 150px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .big {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 270px;
            top: -20px;
            overflow: hidden;
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!-- 小图片 -->
        <img src="rp4.png" alt="">
        <!-- 小图片内的镜片 -->
        <div class="inner"></div>
        <!-- 大图片显示区域 -->
        <div class="big">
            <!-- 大图片 -->
            <img src="rp41.png" alt="">
        </div>
    </div>
    <script>
        var wrap = document.querySelector('.wrap');
        var inner = document.querySelector('.inner');
        var big = document.querySelector('.big');
        var bigImg = document.querySelector('.big img');
        // 鼠标移动事件
        wrap.onmousemove = function (e) {
            var e = window.event || e;
            // 获取元素相对于浏览器窗口的坐标e.clientX-镜片一半的距离-相对于body的偏移量
            var left = e.clientX - inner.offsetWidth / 2 - wrap.offsetLeft;
            var top = e.clientY - inner.offsetHeight / 2 - wrap.offsetTop;
            // console.log(left, top);
            // 控制镜片移动的最大边界；
            var bigWidth = wrap.offsetWidth - inner.offsetWidth;
            var bigHeight = wrap.offsetHeight - inner.offsetHeight;
            // console.log(bigWidth, bigHeight);
            // 如果鼠标移动的最大值大于最大边界，限定最大值为最大边界；
            if (left > bigWidth) {
                left = bigWidth;
            }
            if (left < 0) {
                left = 0;
            }
            if (top > bigHeight) {
                top = bigHeight;
            }
            if (top < 0) {
                top = 0;
            }
            // 控制镜片的位置
            inner.style.left = left + "px";
            inner.style.top = top + 'px';
            // 控制大图片移动相对位置(-大图的宽度/小图的宽度*镜片的偏移量)
            bigImg.style.marginLeft = -500 / 250 * inner.offsetLeft + 'px';
            bigImg.style.marginTop = -500 / 250 * inner.offsetTop + 'px';
        }
        wrap.onmouseenter = function () {
            inner.style.display = 'block';
            big.style.display = 'block';
        }
        wrap.onmouseleave = function () {
            inner.style.display = 'none';
            big.style.display = 'none';
        }
    </script>
</body>

</html>

本地是好的

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现淘宝京东购物网站商城商品的鼠标经过放大镜效果

js实现淘宝京东购物网站商城商品的鼠标经过放大镜效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
复制链接

扫一扫