js实现放大镜效果

原理：

鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置；

放大镜的移动方向和大图片的移动方向：横向和纵向都是相反，才可以保证同步；

需要元素：大图和小图，存放大图和小图的容器，一个放大镜

技术点：

鼠标事件的捕获：onmouseover（进入）、onmouseout（移除）、onmousemove（移动）

clientX、clientY：事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平、垂直坐标

offsetLeft、offsetTop：距离左侧和上部的距离，相对于窗口

offsetWidth、offsetHeight：本身的宽高，包括border

重点、难点：让小图和大图等比例同步移动

关键：小图片的比例和大图片的比例是一样的，放大镜比例和右侧大的容器比例是一样的；他们之间的比例是相同的

<html>

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            
            .small-box {
                width: 300px;
                height: 300px;
                margin-left: 100px;
                margin-top: 100px;
                border: 1px #ccc solid;
                cursor: move;
                float: left;
                position: relative;
            }
            
            .small-box img {
                width: 300px;
                height: 300px;
            }
            
            .tool {
                width: 150px;
                height: 150px;
                background-color: gold;
                opacity: 0.6;
                filter: alpha(opacity=60);
                position: absolute;
                left: 0px;
                top: 0px;
                display: none;
            }
            
            .tool.active {
                display: block;
            }
            
            .big-box {
                width: 300px;
                height: 300px;
                border: 1px #ccc solid;
                overflow: hidden;
                float: left;
                margin-top: 100px;
                position: relative;
                display: none;
            }
            
            .big-box.active {
                display: block;
            }
            
            .big-box img {
                width: 600px;
                height: 600px;
                position: absolute;
            }
        </style>
    </head>

    <body>
        <div class="small-box" id="smallBox">
            <img src="images/img.jpg" />
            <div class="tool" id="tool"></div>
        </div>
        <div class="big-box" id="bigBox">
            <img src="images/img-lg.jpg" id="bigImg" />
        </div>
        <script>
            /*
                第一步：当页面加载完后，获取所要操作的节点对象。
                第二步：为smallBox添加一个鼠标浮动事件
                   当鼠标浮动到smallBox可视区域的时候，显示出小黄盒子tool
                   和右边的大盒子（小黄盒子的放大版）bigBox
                   添加active
             
                  为smallBox添加一个鼠标离开事件
                   隐藏小黄盒子和右边的大盒子
                   去掉active
             
                第三步：为smallBox添加一个鼠标移动事件
                  小黄盒子tool要跟着鼠标的坐标移动
                  右边的大盒子里的图片也跟着指定的比例移动
               */
            var smallBox = document.getElementById("smallBox"); //小盒子
            var tool = document.getElementById("tool"); //小盒子中的黄色区域
            var bigBox = document.getElementById("bigBox"); //大盒子
            var bigImg = document.getElementById("bigImg"); //放大的图片
            //鼠标进入小盒子区域内，显示黄色区域和大盒子
            smallBox.onmouseenter = function() {
                tool.className = "tool active";
                bigBox.className = "big-box active";
            }
            //鼠标离开小盒子区域，不显示黄色区域和大盒子
            smallBox.onmouseleave = function() {
                tool.className = "tool";
                bigBox.className = "big-box";
            }
            //鼠标在小盒子内移动
            smallBox.onmousemove = function(e) {
                var _e = window.event || e; //事件对象
                
                //this.offsetLeft小图距离左边的距离
                //tool.offsetWidth放大镜的宽度，除以2的话鼠标就位于放大镜的中心了
                var x = _e.clientX - this.offsetLeft - tool.offsetWidth / 2; //事件对象在小盒子内的横向偏移量
                
                var y = _e.clientY - this.offsetTop - tool.offsetHeight / 2; //竖向偏移量
                if(x < 0) {
                    x = 0; //当左偏移出小盒子时，设为0
                }
                if(y < 0) {
                    y = 0; //当上偏移出小盒子时，设为0
                }
                if(x > this.offsetWidth - tool.offsetWidth) {
                    x = this.offsetWidth - tool.offsetWidth; //当右偏移出小盒子时，设为小盒子的宽度-黄色放大区域宽度
                }
                if(y > this.offsetHeight - tool.offsetHeight) {
                    y = this.offsetHeight - tool.offsetHeight; //当下偏移出小盒子时，设为小盒子的高度-黄色放大区域高度
                }
                tool.style.left = x + "px"; //黄色放大区域距离小盒子左偏距
                tool.style.top = y + "px"; //黄色放大区域距离小盒子上偏距
                bigImg.style.left = -x * 2 + "px"; //放大图片移动方向相反，偏移距离加倍（css样式中，大图div是小图div的2倍，所以乘2）
                bigImg.style.top = -y * 2 + "px";
            }
        </script>
    </body>

</html>

来源：https://www.cnblogs.com/YAN-HUA/p/9212733.html

标签

tool