原生js 放大镜

最新推荐文章于 2025-05-15 09:16:30 发布
原创最新推荐文章于 2025-05-15 09:16:30 发布 · 215 阅读
0 ·
CC 4.0 BY-SA版权
js 专栏收录该内容
6 篇文章
订阅专栏
<!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
        }

        #demo {
            /* display: block; */
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border: 1px solid red;
        }

        #small-box {
            position: relative;
            z-index: 1;
        }


        #mark {
            position: absolute;
            display: block;
            width: 400px;
            height: 255px;
            background-color: #fff;
            filter: alpha(opacity=0);
            opacity: 0;
            z-index: 10;
        }

        #float-box {
            width: 100px;
            height: 100px;
            position: absolute;
            display: none;
            background: #fff;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            /* filter:alpha(opacity=50)是IE专用的属性，因为它不支持opacity属性，为了保证浏览器的兼容性，建议使用时俩个都写。 */
            opacity: 0.5;
            /* 透明度 */
            border-radius: 75%;
            cursor: pointer;
        }


        #big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 600px;
            height: 500px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

        #big-box img {
            position: absolute;
            z-index: 5;
        }
    </style>
</head>

<body>
    <div id="demo">
        <div id="small-box">
            <!-- 原始图片所在区域 -->
            <div id="mark"></div>
            <!-- 扫描的圈圈 -->
            <div id="float-box"></div>
            <!-- 原图图片 -->
            <img src="https://up.enterdesk.com/edpic_source/5f/19/b0/5f19b0229f599c7e8881c64da76a9c68.jpg" width="400px" height="255px" />
        </div>
        <!-- 显示区域:显示放大图片区域 -->
        <div id="big-box">
            <!-- 放一定的图片 -->
            <img src="https://up.enterdesk.com/edpic_source/5f/19/b0/5f19b0229f599c7e8881c64da76a9c68.jpg" />
        </div>
    </div>
    <script>
        //页面加载完毕后执行
        window.onload = function () {
            // 获取所有被js操作元素队形
            var objDemo = document.getElementById("demo");
            var objSmallBox = document.getElementById("small-box");
            var objMark = document.getElementById("mark");
            var objFloatBox = document.getElementById("float-box");
            var objBigBox = document.getElementById("big-box");
            var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
            // 给原始图片所在区域；绑定当鼠标移入时事件；
            objMark.onmouseover = function () {
                objFloatBox.style.display = "block"
                objBigBox.style.display = "block"
            }
            // 给原始图片所在区域；绑定当鼠标移出时事件
            objMark.onmouseout = function () {
                objFloatBox.style.display = "none"
                objBigBox.style.display = "none"
            }

            // 给原始图片所在区域；绑定鼠标移动事件
            objMark.onmousemove = function (ev) {
                console.log(ev)
                var _event = ev || window.event; //兼容多个浏览器的event参数模式

                // objDemo.offsetLeft = demo 左边距离body 的距离；= demo外边距
                 // objSmallBox.offsetLeft = 0 ；因为子元素脱离了父元素；所以small-box 左边距离 demo的距离 等于 0 
                 // objFloatbox.offsetWidth/2 = (width + border)/2 =51
                var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth /
                    2;
                 
                console.log(left+'='+ _event.clientX+'-'+objDemo.offsetLeft+'-'+ objSmallBox.offsetLeft+'-'+ objFloatBox.offsetWidth /
                2)

                // offsetX/Y , 触发事件位置；X ,Y子元素距离元素左边的距离；顶部的距离 与父元素是否有位置属性没有关系。坐标轴原点在父元素左上角
                
                var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight /
                    2;

                //设置边界处理，防止移出小图片
                if (left < 0) {
                    left = 0;
                } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
                    // 当扫描区域移动到;原始图片显示区域边上时候；就不让扫描区域移动
                    left = objMark.offsetWidth - objFloatBox.offsetWidth;
                }

                // 上下边境的处理
                if (top < 0) {
                    top = 0;
                } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
                    // 当扫描区域移动到;原始图片显示区域边上时候；就不让扫描区域移动
                    top = objMark.offsetHeight - objFloatBox.offsetHeight;

                }

                objFloatBox.style.left = left + "px"; //oSmall.offsetLeft的值是相对什么而言
                objFloatBox.style.top = top + "px";


                // 对放大图片的位置移动处理
                //求其比值
                var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
                var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

                //方向相反，小图片鼠标移动方向与大图片相反，故而是负值
                objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) +
                    "px";
                objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) +
                    "px";
            }
        }
    </script>
</body>

</html>