如何用JS实现放大镜功能

一个新手 原创: 2017-09-25 09:36:16 3214浏览

原理

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

思路

首先，我们先理清楚页面元素。

页面元素

这里写图片描述
容器——demo
小盒子（尺寸与图片一样）

放大镜框
小图片

大盒子（尺寸与图片一样）

大图片

事件

事件都发生在小盒子上。

最简单的是——onmouseover、onmouseout，此时只需要控制放大镜框，以及大容器的显示与隐藏。

最复杂的是，onmousemove事件。
在onmousemove事件，我们需要计算放大镜框的宽高坐标。

实时更新坐标，这样放大镜就会随着鼠标移动。

放大镜宽高坐标 = 鼠标位置宽高 - demo的offset值 - 小盒子的offset值 - 放大镜框一半的宽高

放大镜框在小盒子里移动的距离，和大盒子移动的距离具有比例关系，并且运动方向相反。
比例计算公式

X/B = ?/D

大图坐标值

-（X/B）* D

这里写图片描述

IE兼容问题

当我们的鼠标在小图上mouseover的时候，同时也在放大镜框mouseover。

但是，IE会错误地触发小图的mouseout事件。

为了解决这个问题，我们需要在小盒子内，创建一个最上层的遮罩元素（与小图尺寸一样）。

把原来绑定在小盒子的事件，都改为绑定遮罩元素。

特别注意

这个元素，必须设置背景，然后再设置透明度。

因为，IE不识别透明元素、

代码实现

<!DOCTYPE HTML>
    <html>
    <head>
        <meta charset = "utf-8">
        <meta http-equiv = "X-UA-Compatible" content = "chrome=1" />
        <title>放大镜</title>
        <style>
            *{                
            margin:0;                
            padding:0;            
            }

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

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

            #float-box{                
            display:none;                
            width:160px;                
            height:120px;                
            position:absolute;                
            background:#ffffcc;                
            border:1ps solid #ccc;                
            filter:alpha(opacity=50);                
            opacity:0.5;                
            cursor:move;            
            }

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

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

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

    <script>
        window.onload = function(){
            //获取元素
            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) {

                var _event = ev || window.event;  //兼容多个浏览器的event参数模式

                //求出放大镜的宽高数值
                var left = _event.clientX - objDemo.offsetLeft - objMark.offsetLeft - objFloatBox.offsetWidth / 2;                var top = _event.clientY - objDemo.offsetTop - objMark.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";   
                objFloatBox.style.top = top + "px";                
                var percentX = left / objMark.offsetWidth 
                var percentY = top / objMark.offsetHeight;


                objBigBoxImage.style.left = -percentX * objBigBoxImage.offsetWidth + "px";
                objBigBoxImage.style.top = -percentY * objBigBoxImage.offsetHeight  + "px";
            }   
        }   

    </script>

    <body>
        <p id = "demo">
            <p id = "small-box">
                <p id="mark"></p>
                <p id = "float-box"></p>
                <img src="small.jpg" />
            </p>
            <p id = "big-box">
                <img src="big.jpg" />
            </p>
        </p>
    </body>
 </html>

以上就是如何用JS实现放大镜功能的详细内容，更多请关注php中文网其它相关文章！

javascript 放大镜实现 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：Zepto源码中Gesture模块介绍下一条：jquery选择器介绍