原生JS实现放大镜效果

Posted 2020-10-11 CodingPrince

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS实现放大镜效果相关的知识，希望对你有一定的参考价值。

效果：

1、鼠标放上去会有半透明遮罩、右边会有大图片局部图

2、鼠标移动时右边的大图片也会局部移动

放大镜的关键原理：

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

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

页面元素：

技术点：事件捕获，定位

难点：计算

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

涉及到的技术点：

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

（2） offsetLeft、offsetTop、offsetWidth、offsetHeight、event.clientX、event.clientY

offsetLeft子元素相对于父元素的左位移
offsetWidth，offsetHeight一个元素的宽度和高度，宽度和高度是不包括滚动条的。

event.clientX、event.clientY鼠标的X轴和Y轴，相对于整个页面的坐标，而不是子元素

offsetLeft和style.left对比：

（1）、style.left返回的是字符串，如30px、offsetLeft返回的是数值30；

（2）、style.left是可读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left；

（3）、style.left的值需要事先定义，否则取到的值为空。

style.left只针对在html中写的值有效，样式表中无法定义style.left;

制作放大镜所需要的计算

》重点：如何让小图片上的放大镜和大图片同步移动

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

移动时的比例计算：

放大镜核心计算公式：

编码步骤：

1．新建html文件；（小图片和大图片的容器盛放）

<div id="demo">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="imgs/macbook-small.jpg"/>
    </div>
    <div id="big-box">
        <img src="imgs/macbook-big.jpg"/>
    </div>
</div>

2．设置样式（放大镜漂浮在小容器里面，并且具有一定的透明度，大图片隐藏）

<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;
    }
#float-box {
    display: none;
    width: 160px;
    height: 120px;
    position: absolute;
    background: #ffffcc;
    border: 1px solid #ccc;
    filter: alpha(opacity=50);
    opacity: 0.5;
}
#mark {/*应该是把图片放在这个上面，它的透明度为0，是个block*/
    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>

3． js逻辑代码

（1）先捕获元素

var objDemo=document.getElementById("demo");
var objSmallBox=document.getElementById("small-box");
var objMarkBox=document.getElementById("mark");
var objFloatBox=document.getElementById("float-box");
var objBigBox=document.getElementById("big-box");
var objBigBoxImg=objBigBox.getElementsByTagName("img")[0];

（2）给小盒子添加事件，移入和移出
　　移入：浮动的box和和bigBox显示

objSmallBox.onmouseover=function(){
    objFloatBox.style.display="block";
    objBigBox.style.display="block";
}
//移除：浮动的box和bigBox隐藏
objSmallBox.onmouseout=function(){
    objFloatBox.style.display="none";
    objBigBox.style.display="none";
}

（3）添加事件

（2）    objSmallBox.onmousemove=function(ev){
    var _event=ev;
    //1.第一件事，跟随鼠标的位置来计算放大镜的位置
    //计算值：
    var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;
    var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;
    //把值赋值给放大镜
    objFloatBox.style.left=left+"px";
    objFloatBox.style.top=top+"px";

}

（4）计算比例

//3计算比例
var percentX=left/(objMarkBox.offsetWidth-objFloatBox.offsetWidth);
var percentY=top/(objMarkBox.offsetHeight-objFloatBox.offsetHeight);

（5）

//4利用这个比例计算距离后赋值给右侧的图片
objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px";
objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px";）

（6）

//5.优化，在前面加判断,不让其溢出，加判断
if(left<0) left=0;
if(top<0) top=0;
if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth)
        left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;
if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight)
        top=objSmallBox.offsetHeight-objFloatBox.offsetHeight;

　　完整源代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <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;
        }
        #float-box {
            display: none;
            width: 160px;
            height: 120px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }
        #mark {/*应该是把图片放在这个上面，它的透明度为0，是个block*/
            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>
    <script>

        //页面加载完毕后执行
        window.onload = function () {
            //找六个个元素：demo，smallBox,foatBox,mark,bigfloatBox,imgs,
            var objDemo=document.getElementById("demo");
            var objSmallBox=document.getElementById("small-box");
            var objMarkBox=document.getElementById("mark");
            var objFloatBox=document.getElementById("float-box");
            var objBigBox=document.getElementById("big-box");
            var objBigBoxImg=objBigBox.getElementsByTagName("img")[0];

            //给小盒子添加事件，移入和移出
            //移入：浮动的box和和bigBox显示
            objSmallBox.onmouseover=function(){
                objFloatBox.style.display="block";
                objBigBox.style.display="block";
            }
            //移除：浮动的box和bigBox隐藏
            objSmallBox.onmouseout=function(){
                objFloatBox.style.display="none";
                objBigBox.style.display="none";
            }

            //给小盒子添加鼠标移动事件
            objMarkBox.onmousemove=function(ev){
                var _event=ev||window.event;//做兼容性，兼容IE
                //1计算值：
                var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;
                var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;

                //5.优化，在前面加判断,不让其溢出，加判断
                if(left<0) left=0;
                if(top<0) top=0;
                if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth)
                        left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;
                if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight)
                        top=objSmallBox.offsetHeight-objFloatBox.offsetHeight;

                //2把值赋值给放大镜
                objFloatBox.style.left=left+"px";
                objFloatBox.style.top=top+"px";

                //3计算比例
                var percentX=left/(objMarkBox.offsetWidth-objFloatBox.offsetWidth);
                var percentY=top/(objMarkBox.offsetHeight-objFloatBox.offsetHeight);

                //4利用这个比例计算距离后赋值给右侧的图片
                objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px";
                objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px";
            }

        }
    </script>
</head>
<body>
<div id="demo">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="imgs/macbook-small.jpg"/>
    </div>
    <div id="big-box">
        <img src="imgs/macbook-big.jpg"/>
    </div>
</div>
</body>
</html>

以上是关于原生JS实现放大镜效果的主要内容，如果未能解决你的问题，请参考以下文章