用JavaScript写一个放大镜效果

最新推荐文章于 2024-07-17 19:07:26 发布

一只海星.

最新推荐文章于 2024-07-17 19:07:26 发布

阅读量119

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/y15237261911/article/details/137791559

版权

放大镜一般运用于电商网站上的商品预览，移动到商品图片上的时候就会显示出来具体效果。

代码详情：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 1200px;
            margin: 100px auto;
        }
        /* 小盒子内容 */
        .min{
            width: 450px;
            height: 450px;
            border: 1px solid red;
            position: relative;
            float: left;
        }
         /* 遮罩层 */
         .mask{
            width:200px;
            height: 200px;
            background-color: burlywood;
            position: absolute;
            left: 0;
            top: 0;
            opacity: .5;
            display: none;
            
        }
        /* 大盒子内容 */
        .max{
            width: 500px;
            height: 500px;
            border: 1px solid blue;
            overflow: hidden;
            float: left;
            display: none;
            position: relative;
        }
        #img_box{
            position: absolute;
        }
       
    </style>
</head>
<body>
    <div class="main">
        <!-- 小盒子 -->
        <div class="min">
            <!-- 小图片 -->
            <img src="images/min.jpg" alt="">
            <!-- 淡黄色的遮罩层 -->
            <div class="mask"></div>
        </div>
        <!-- 大盒子内容 -->
        <div class="max">
            <img src="images/max.jpg" id="img_box" alt="">
        </div>
    </div>
    <script>
        // 获取元素
        var min = document.getElementsByClassName('min')[0];
        var mask =  document.getElementsByClassName('mask')[0];
        var max = document.getElementsByClassName('max')[0];
        var imgBox = document.getElementById('img_box');
        // 先给小盒子绑定事件当鼠标在小盒子内移动时遮罩层要显示大盒子要显示
        // 鼠标经过小盒子，显示大盒子
        min.onmouseenter = function(e){
            // 显示mask 和max
            mask.style.display = 'block';
            max.style.display = 'block';
        }
        // 鼠标在小盒子里移动，蒙版要跟着鼠标走
        min.onmousemove = function(e){
            // 鼠标在小盒子内的坐标
            var minX = e.pageX - min.offsetLeft;
            var minY = e.pageY - min.offsetTop;
            // console.log(minX, minY);
            // 判断蒙版能移动的最大距离
            // 蒙版能移动的最大距离
            var maxMaskDisX = min.offsetWidth - mask.offsetWidth;
            // console.log('maxMaskDisX',maxMaskDisX)
            var maxMaskDisY = min.offsetHeight - mask.offsetHeight;
            // console.log('maxMaskDisY',maxMaskDisY)
            // 光标在蒙版的中间
            minX = minX - mask.offsetWidth / 2;
            minY = minY - mask.offsetHeight / 2;
            // 判断蒙版移动的坐标
            if(minX >maxMaskDisX){
                minX=maxMaskDisX
            }else if(minX < 0){
                minX =0;
            }
            if(minY >maxMaskDisY){
                minY=maxMaskDisY
            }else if(minY < 0){
                minY =0;
            }
            // 让蒙版跟着我的鼠标移动
            mask.style.left = minX + 'px';
            mask.style.top = minY + 'px';
            // 蒙版移动后，大盒子也要跟着移动
            // minX minY代表的是鼠标在图片某个位置
            // maxMaskDisX 蒙版能移动最大距离X
            // 200/251 代表的是蒙版移动后，大盒子移动的百分比
            // 某个值X/最大值
            // 我有个小篮子 100立方 里面各有五个红黄蓝的小球
            // 我有个大盒子 500立方  我各有25个红黄蓝的小球
            var radioX = minX / maxMaskDisX;
            var radioY = minY / maxMaskDisY;
            console.log('radioX',radioX);
            // 大盒子进行移动 max.offsetWidt 大盒子的宽 imgBox.offsetWidth 图片的宽度
            imgBox.style.left = radioX * (max.offsetWidth - imgBox.offsetWidth) + 'px';
            imgBox.style.top = radioY * (max.offsetHeight - imgBox.offsetHeight) + 'px';



        }
        // 鼠标离开小盒子的时候，遮罩层消失大盒子消失
        min.onmouseleave = function(){
              // 显示mask 和max
              mask.style.display = 'none';
            max.style.display = 'none';
        }

        



    </script>
</body>
</html>

实际运行效果：