原生js实现仿商品放大镜功能

最新推荐文章于 2022-08-17 20:41:50 发布

wxt_

最新推荐文章于 2022-08-17 20:41:50 发布

阅读量265

点赞数 1

分类专栏： js 文章标签： JavaScript放大镜效果

本文链接：https://blog.csdn.net/wxt_wjc/article/details/103937739

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>放大镜</title>
    <style>
        html,body{
            margin: 0;
            height: 0;
        }
        .wrapper{
            width: 1200px;
            margin: 0 auto;
        }
        .left{
            width: 350px;
            height: 350px;
            background-color: #ccc;
            float: left;
        }
        .left .small{
            width: 350px;
            height: 350px;
            background-image: url("../images/small.jpg");
            overflow: hidden;
            position: relative;
        }
        .left .mask{
            width: 175px;
            height: 175px;
            background-color: yellow;
            opacity: 0.5;
            cursor: move;
            display: none;

            position: absolute;
            top: 0;
            left: 0;

        }
        .right{
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            overflow: hidden;
            float: left;
            margin-left: 10px;
            display: none;

        }
        .right .big{
            width: 400px;
            height: 400px;
            position: relative;
        }
        .right .big img{
            width: 800px;
            height: 800px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }

    </style>
    <script>
        window.onload=function(){
            //公共函数
            //显示
            function show(dom){
                dom.style.display = "block"
            }
            //影藏
            function hidden(dom){
                dom.style.display = "none"
            }
            //步骤:
                // 1. 鼠标移入小盒子的时候,显示遮罩层,显示大盒子
                // 2. 鼠标在小盒子内移动,改变遮罩层位置
                // 3. 计算遮罩层在小盒子内移动的距离/遮罩层可以移动的最大距离
                // 4.0 实现大图片联动效果
            //1.0
            var left = document.getElementsByClassName("left")[0];
            var right = document.getElementsByClassName("right")[0];
            var mask = document.getElementsByClassName("mask")[0];
            var bigImage = document.getElementsByClassName("big-img")[0]

            var x = 0;
            var y = 0;
            
            //2.0鼠标移入小盒子(left)
            left.onmouseover = function(){
                //2.0.1显示
                show(mask);
                show(right)
            }
            //4.0移动鼠标
            left.onmousemove = function(evt){
                var event = evt || window.event
                //4.0.1 获取鼠标的位置
                var x = event.pageX;
                var y = event.pageY;
                //4.0.2 计算遮罩层位置
                var left_value = x - this.offsetLeft
                var top_value = y - this.offsetTop
                //5.0 设置中点 减去mask宽高的一半
                left_value = left_value - (mask.offsetWidth / 2);
                top_value = top_value - (mask.offsetHeight / 2)

                //6.0遮罩层移动范围
                if(left_value <= 0){
                    left_value = 0;
                }
                if(left_value >= (left.offsetWidth - mask.offsetWidth)){
                    left_value = left.offsetWidth - mask.offsetWidth;
                }
                if(top_value <= 0){
                    top_value = 0;
                }
                if(top_value >= (left.offsetHeight - mask.offsetHeight)){
                    top_value = left.offsetHeight - mask.offsetHeight;
                }

                //7.0 设置遮罩层(mask)标签位置
                mask.style.left = left_value + "px";
                mask.style.top = top_value + "px";

                //8.0 计算比例
                var demoX = left_value / (left.offsetWidth - mask.offsetWidth)
                var demoY = top_value / (left.offsetHeight - mask.offsetHeight)

                //9.0 计算大图片的移动距离
                var distanceX = bigImage.offsetWidth - right.offsetWidth
                var distanceY = bigImage.offsetHeight - right.offsetHeight

                //10.0 根据比例移动大图片
                var dx = demoX * distanceX
                var dy = demoY * distanceY

                //11.0设置大图片的位置
                bigImage.style.left = -dx + "px"
                bigImage.style.top = -dy + "px"

            }
            //3.0鼠标离开小盒子(left)
            left.onmouseleave = function(){
                //3.0.1隐藏
                hidden(mask);
                hidden(right)
            }
        }
    </script>
</head>
<body>
    <div class="wrappe">
        <div class="left">
            <!-- 小盒子 -->
            <div class="small">
                <!-- 遮罩层 -->
                <div class="mask"></div>
            </div>
        </div>
        <div class="right">
            <div class="big">
                <img class="big-img" src="../images/big.jpg" alt="">
            </div>
        </div>
    </div>
</body>
</html>

图片:

wxt_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
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-...
复制链接

扫一扫