原生js实现图片放大镜效果及原理分析

责编:menVScode 2017-11-28 18:20 阅读(1589)

放大镜的关键原理

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

        放大镜的移动方向和大图片的移动方向:横向相反,纵向相反。

页面元素

        小图片、存放小图片的容器、大图片、存放大图片的容器、放大镜

技术点:时间捕获、定位

        onmouseover:会在鼠标指针移动到指定的对象上时发生。

        onmouseout:会在鼠标指针移出指定的对象上时发生。

        onmousemove:会在鼠标指针移动时发生。

QQ截图20171128165907

        offsetLeft:子元素相对于父元素的左位移。

        offsetTop:子元素相对于父元素的上部位移。

        offsetWidth、offsetHeight:元素的宽度和高度,但宽度和高度不包括滚动条隐藏的部分。

        event.clientX、event.clientY:鼠标相对于整个页面的X轴与Y轴的坐标。

        offsetLeft 与 style.left 对比:

                style.left 返回的是字符串,如30px,offsetLeft 返回的是数值30;

                style.left 是可读写,offsetLeft 是只读的,所以要改变 div 的位置,只能修改 style.left;

                style.left 的值需要事先定义,否则取到的值为空,写在样式中也获取不到;比如:<div id="div1" style="left:120px;"> 才能获取到值。

QQ截图20171128180157


计算:如何让小图片的放大镜和大图片同步移动

QQ截图20171129150323

        放大镜与大图局部显示的容器宽高是成一定比例的。


原生js实现图片放大镜效果代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        img{display: block;}
        #box{width:500px;margin: 50px auto;}
        #small{width: 250px;position: relative;}
        #mask{width: 100%;height:100%;position: absolute;top: 0;left: 0;background-color: #fff;filter: alpha(opacity=0);opacity: 0;z-index: 5;}
        #move{width: 80px;height: 80px;background: red;opacity: .6;position: absolute;top: 0;left: 0;display: none;}
        #big{width: 150px;height: 150px;position:relative;overflow: hidden;border:1px solid green;display: none;}
        #bigImg{position: absolute;top: 0;left: 0;}
    </style>
</head>
<body>
    <div id="box">
        <div id="small">
            <div id="mask"></div>
            <p id="move"></p>
            <img id="smallImg" src="http://www.menvscode.com/upload/21448101514686324.jpg" width="100%" alt="">
        </div>
        <div id="big">
            <img id="bigImg" src="http://www.menvscode.com/upload/21448101514686324.jpg" alt="">
        </div>
    </div>
    <script>
        window.onload = function () {
            var bigImg = document.getElementById('bigImg');
            var smallObj = document.getElementById('small');
            var bigObj = document.getElementById('big');
            var moveObj = document.getElementById('move');
            var maskObj = document.getElementById('mask');

            maskObj.onmouseover = function(){
                moveObj.style.display = 'block';
                bigObj.style.display = 'block';
            }

            maskObj.onmouseout = function(){
                moveObj.style.display = 'none';
                bigObj.style.display = 'none';
            }

            maskObj.onmousemove = function(ev){
                var ev = ev || window.event;
                // 计算放大镜的left值
                var moveObjLeft = ev.clientX-smallObj.offsetLeft-moveObj.offsetWidth/2;
                // 计算放大镜的top值
                var moveObjTop = ev.clientY-smallObj.offsetTop-moveObj.offsetHeight/2;
                // left值超出左边界赋值为0
                moveObjLeft = moveObjLeft<0 ? 0 : moveObjLeft;
                // left值超出(小图容器宽度-放大器本身宽度)时
                moveObjLeft = moveObjLeft>(smallObj.offsetWidth-moveObj.offsetWidth) ? smallObj.offsetWidth-moveObj.offsetWidth : moveObjLeft;

                moveObjTop = moveObjTop<0 ? 0 : moveObjTop;
                moveObjTop = moveObjTop>(smallObj.offsetHeight-moveObj.offsetHeight) ? smallObj.offsetHeight-moveObj.offsetHeight : moveObjTop;

                moveObj.style.left = moveObjLeft+'px';
                moveObj.style.top = moveObjTop+'px';

                var bigImgLeft = (moveObjLeft/moveObj.offsetWidth)*bigObj.offsetWidth;
                var bigImgTop = (moveObjTop/moveObj.offsetHeight)*bigObj.offsetHeight;

                //bigImg.style.left = -bigImgLeft+'px';
                //bigImg.style.top = -bigImgTop+'px';
                bigImg.style.cssText="left:"+(-bigImgLeft)+"px;top:"+(-bigImgTop)+"px";
            }
        }
    </script>
</body>
</html>

        值得注意是,小图容器内增加了一个阴影层<div id="mask"></div>,这是为了解决在IE浏览器上由于事件捕获造成的兼容性问题。

标签: 放大镜 js
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码