js实现放大镜的效果

最新推荐文章于 2024-05-24 13:39:19 发布

清酒独酌

最新推荐文章于 2024-05-24 13:39:19 发布

阅读量84

点赞数

分类专栏： javascript 文章标签： javascript css html 前端

本文链接：https://blog.csdn.net/yang68668/article/details/121231287

版权

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

 <style>
        /* 清除默认边距 */
        
        * {
            margin: 0;
            padding: 0;
        }
        /* 让盒子居中 */
        
        .wrap {
            width: 1226px;
            margin: 100px auto;
        }
        /* 小盒子的样式 */
        
        #small {
            width: 350px;
            height: 449px;
            float: left;
            position: relative;
        }
        /* 大盒子的样式 */
        /* 大盒子的宽度计算方法
          小图片的宽度/遮罩层的宽度 = 大图片的宽度/大盒子的宽度
         800*220/350=503(大盒子的宽度)
         */
        
        #big {
            background-color: seagreen;
            width: 503px;
            height: 503px;
            float: left;
            overflow: hidden;
            margin-left: 20px;
            position: relative;
        }
        /* 遮罩层的样式 */
        
        #mark {
            width: 220px;
            height: 220px;
            background-color: #fff;
            position: absolute;
            left: 0;
            top: 0;
            opacity: .4;
            /* 将鼠标变为方向样式 */
            cursor: move;
            display: none;
        }
        
        #bigImg {
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!-- 小盒子 -->
        <div id="small">
            <img src="../img/img/small.jpg" alt="">
            <!-- 遮罩层 -->
            <div id="mark"></div>
        </div>
        <!-- 大盒子 -->
        <div id="big">
            <img src="../img/img/big.jpg" alt="" id=bigImg>
        </div>
    </div>
    <!-- 
      实现步骤：
      1.获取元素，大盒子，小盒子，遮罩层
      2.为小盒子添加移动事件
      3.求遮罩层的偏移量（pageX-遮罩层宽度一半（offsetWidth / 2）-小盒子的左侧偏移量（offsetLeft））
      4.求边界值 （小盒子的宽-遮罩层的宽）
      5.判断移动的范围
      6.给遮罩层添加left和top，让它动起开
      7.设置遮罩层移入显示，移出隐藏。
      8.让大图片移动，和遮罩层一致
     -->
    <script>
        /* 获取小盒子 */
        var small = document.getElementById('small');
        /* 获取遮罩层 */
        var mark = document.getElementById('mark')
            /* 获取大盒子 */
        var big = document.getElementById('big')
            /* 获取大图片 */
        var bigImg = document.getElementById('bigImg')
            /* 为小盒子添加移动事件 */
        small.onmousemove = function(e) {
                /* 求遮罩层的偏移量  pageX - 遮罩层宽度的一半 - 小盒子的左侧偏移量*/
                var sm_left = e.pageX - mark.offsetWidth / 2 - small.offsetLeft
                var sm_top = e.pageY - mark.offsetHeight / 2 - small.offsetTop
                    //求边界值  小盒子的宽-遮罩层的宽
                var max_left = small.offsetWidth - mark.offsetWidth
                var max_top = small.offsetHeight - mark.offsetHeight
                    /* 判断移动的范围 */
                    /* 左右的边界 */
                if (sm_left < 0) {
                    sm_left = 0;
                } else if (sm_left > max_left) {
                    sm_left = max_left
                }
                /* 上下的边界 */
                if (sm_top < 0) {
                    sm_top = 0;
                } else if (sm_top > max_top) {
                    sm_top = max_top
                }
                /* 让遮罩层动起来 */
                mark.style.left = sm_left + 'px';
                mark.style.top = sm_top + 'px';
                /* 获取倍数   大图片的宽度/小盒子的宽度*/
                var ite = bigImg.offsetWidth / small.offsetWidth;
                /* 大图片移动 */
                bigImg.style.left = -sm_left * ite + 'px';
                bigImg.style.top = -sm_top * ite + 'px';

            }
            /* 遮罩层移入显示 */
        small.onmouseenter = function() {
                mark.style.display = 'block'
                big.style.display = 'block'
            }
            /* 遮罩层移出时隐藏 */
        small.onmouseleave = function() {
            mark.style.display = 'none'
            big.style.display = 'none'
        }
    </script>
</body>

清酒独酌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现放大镜的效果

<style> /* 清除默认边距 */ * { margin: 0; padding: 0; } /* 让盒子居中 */ .wrap { width: 1226px; margin: 100px auto; } /* 小盒子的样式 */ ..
复制链接

扫一扫