js实现图片放大镜效果——简单方法

女爷i 2022-08-29 05:45 211阅读 0赞

之前写过一篇关于电商项目商品详情页面的图片放大镜效果：[电商项目商品详情页的图片放大效果实现：https://blog.csdn.net/yehaocheng520/article/details/119003274?spm=1001.2014.3001.5501][https_blog.csdn.net_yehaocheng520_article_details_119003274_spm_1001.2014.3001.5501]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
当时是在`vue`项目中使用的，其实跟在`js`中原理也是一样的。

实现图片放大镜效果的重点就是下面的这张图了：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
上面的方法中，右侧图片，为了实现放大，使用的是`background`背景图片的设置原理，给`background-size`设置大于1的参数，就可以实现图片的放大效果了。

下面介绍另一种方法来实现图片放大镜的效果：个人感觉下面的方法更简单。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

## 1.`html`部分代码——左右布局，左侧有图片+选择框，右侧有图片 ##

## 2.`css`部分——右侧大图直接设置`width` `height`百分比超过1，实现放大效果 ##

.leftcon{ 
    	width: 350px;
    	height: 350px;
    	margin: 100px 20px 0px 312px;
    	float: left;
    	position: relative;
    	box-shadow:3px 3px 10px 0 #111111; /*给图片施加阴影效果 */
              -webkit-box-shadow: 3px 3px 10px 0 #111111;  /*兼容性处理*/
              -moz-box-shadow: 3px 3px 10px 0 #111111;	
    }
    .leftcon img{ 
    	width: 100%;
    	height: 100%;
    }
    
    .leftcon .slide_box{ 
    	display:none;  /*将小方块盒子隐藏*/
        position:absolute;  
        top:0;  
        left:0;  
        width:175px;  
        height:175px;  
        background:#000;  
        opacity: 0.3;  
        cursor:move;  /*改变鼠标的形状*/
    }
    
    .rightcon{ 
    	display: none;  /*将右边div隐藏*/
    	width: 350px;
    	height: 350px;
    	margin-top: 100px;
    	float: left;
    	overflow: hidden;
    	position: relative;
    }
    
    .rightcon img{ 
    	width: 200%;
    	height: 200%;
    	position: absolute;
    	left: 0px;
    	top: 0px;
    }

## 3.`js`部分——关键部分 ##

#### 1.首先获取到几个关键的`dom`元素 ####

var leftone = document.getElementById('left');//获取左侧部分dom
    var rightone = document.getElementById('right');//获取右侧部分dom
    var box = documnent.getElementById('box');//获取选择框dom
    var rimg = rightone.getElementsByTagName('img')[0];//获取右侧部分中的img数组的第一个

#### 2.需要用到的参数——关于浏览器界面的参数 ####

浏览器点击事件传递的事件源是event,代表对象的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，event是window的一个属性

`event || window.event`:就是事件源对象，这样写是为了兼容`IE`浏览器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
根据上面的图片，我们可以看到几个相关的参数：  
`e.pageY`:鼠标点击处距离页面最顶部的距离  
`e.pageX`:鼠标点击处距离页面最左边的距离  
`oAppTop`:就是左侧图片距离页面顶部的距离：也就是当前案例中的`leftone.offsetTop`  
`oAppLeft`:就是左侧图片距离页面左边的距离：也就是当前案例中的`leftone.offsetLeft`  
`height`:就是选择框的高度：也就是当前案例中的`box.offsetHeight`  
`width`:就是选择框的宽度：也就是当前案例中的`box.offsetWidth`

通过上面的分析，可以得出：选择框的位置`left` `top`的大小：  
`var top = e.pageY - leftone.offsetTop - box.offsetHeight/2;`  
`var left = e.pageX - leftone.offsetLeft - box.offsetWidth/2;`

#### 3.计算选择框出现的边界范围——因为选择框是相对于左侧图片的，因此最小值是0 ####

`var maxtop = leftone.offsetHeight - box.offsetHeight;`//选择框的最大top值  
`var maxleft = leftone.offsetWidth - box.offsetWidth;`//选择框的最大left值  
`var mintop = 0;`//选择框的最小top值  
`var minleft = 0;`//选择框的最小left值

#### 4.判断选择框的边界范围 ####

代码分析：

top是鼠标到浏览器的垂直距离减去左边div顶部到浏览器的垂直距离减去选择框的高度的一半，那么现在鼠标在选择框的中心，也就是说，top就等于选择框的顶部到左边的div的垂直距离，那么，如果top<0,就是说选择框和左边的div顶部重合，就让选择框的top值为0，即鼠标继续向上移动，选择框不再移动，从而让选择框的移动范围不能超过左边div的宽高范围

if(top < mintop){ 
    	box.style.top = mintop + "px";
    	mvtop = mintop;
    }else if(top>maxtop){ 
    	box.style.top = maxtop+'px';
    	mvtop = maxtop;
    }else{ 
    	box.style.top = top +'px';
    	mvtop = top;
    }
    
    if(left < minleft){ 
    	box.style.left = minleft + "px";
    	mvleft = minleft;
    }else if(left > maxleft){ 
    	box.style.left = maxleft + "px";
    	mvleft = maxleft;
    }else{ 
    	box.style.left = left + 'px';
    	mvleft = left;
    }

#### 5.给右侧大图的位置赋值 ####

`rimg.style.top = -mvtop*2+‘px’`  
`rimg.style.left = -mvleft*2+'px'`

#### 6.监听鼠标移动的事件——`onmouseomve`和`onmouseleave` ####

鼠标移动效果

leftone.onmousemove = function(e){ 
    	var e = e||window.event;//判断事件源
    	box.style.display = 'block';
    	getPosition(e);//这个就是移动鼠标改变右侧图片位置的方法
    	rightone.style.display = 'block';
    }

鼠标移出效果

leftone.onmouseleave = function(e){ 
    	var e = e||window.event;//判断事件源
    	box.style.display = 'none';
    	rightone.style.display = 'none';
    }

## 完整`html`代码如下 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" href="img/favicon.ico" type="img/x-ico" />
        <title>Image Magnifying Glass</title>
        
        <style type="text/css">
            body { 
                margin: 0px;
                padding: 0px;
            }
            
            img { 
                /* display: block; */
            }
            
            .leftcon { 
                width: 350px;
                height: 350px;
                margin: 100px 20px 0px 312px;
                float: left;
                position: relative;
                box-shadow: 3px 3px 10px 0 #111111;
                /*给图片施加阴影效果 */
                -webkit-box-shadow: 3px 3px 10px 0 #111111;
                /*兼容性处理*/
                -moz-box-shadow: 3px 3px 10px 0 #111111;
            }
            
            .leftcon img { 
                width: 100%;
                height: 100%;
            }
            
            .leftcon .slide_box { 
                display: none;
                /*将小方块盒子隐藏*/
                position: absolute;
                top: 0;
                left: 0;
                width: 175px;
                height: 175px;
                background: #000;
                opacity: 0.3;
                cursor: move;
                /*改变鼠标的形状*/
            }
            
            .rightcon { 
                display: none;
                /*将右边div隐藏*/
                width: 350px;
                height: 350px;
                margin-top: 100px;
                float: left;
                overflow: hidden;
                position: relative;
            }
            
            .rightcon img { 
                width: 200%;
                height: 200%;
                position: absolute;
                left: 0px;
                top: 0px;
            }
        </style>
    </head>
    
    <body>
        <div class="leftcon" id="left">
            <img src="img/风景-1.jpg" />
            <div class="slide_box" id="box"></div>
        </div>
        <div class="rightcon" id="right">
            <img src="img/风景-1.jpg" />
        </div>
    </body>
    <script>
        var leftone = document.getElementById("left");
        var rightone = document.getElementById("right");
        var box = document.getElementById("box");
        var rimg = rightone.getElementsByTagName("img")[0];
        // Event是获取事件对象，对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,envet是windows的一个属性。
        // 放大镜实现方法（获取右边图片定位）
        function getPosition(e) { 
            //这里的参数e就是代表event
            //首先我们要去判断事件源,获取事件源,也就是e
            var e = e || window.event; //实现兼容
            //理解：
            //这个表达式写全是这样：var e=event?event||window.event;
            //如果存在event,那么var e=event;而如果不存在event，那么var e=window.event.那么可以看出确实能实现兼容
    
            var top = e.clientY - leftone.offsetTop - box.offsetHeight / 2;
            var left = e.clientX - leftone.offsetLeft - box.offsetWidth / 2;
            //理解：
            //e.clientY:返回事件触发时鼠标相对于元素视口的Y坐标。
            //e.clientX:返回事件触发时鼠标相对于元素视口的X坐标。
            //这里的元素视口实际上代指就是浏览器，clientX是鼠标距离浏览器左边框的距离，clientY是鼠标距离浏览器上边框的距离。
            //offsetTop获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置。这里就是左边的div相对于body即浏览器窗口的纵向距离
            //offsetLeft获取对象相对于版面或由offsetLeft属性指定的父坐标的计算顶端位置。这里就是左边的div相对于body即浏览器窗口的纵横向距离
            //offsetHeight是对象的可见高度。这里是指小滑块的高度
            //offsetHeight是对象的可见宽度。这里是指小滑块的宽度
            //这里为什么除以2?是因为我们不除以2的话,事件源也就是鼠标就在这个小滑块的的右下角,并不美观
            //我们要让鼠标位于滑块的中心,所以宽高各减去一半
    
            //边界判断
            var maxtop = leftone.offsetHeight - box.offsetHeight; //获取小滑块最大纵向移动距离
            var maxleft = leftone.offsetWidth - box.offsetWidth; //获取小滑块最大横向移动距离
            var mintop = 0; //获取小滑块最小纵向移动距离
            var minleft = 0; //获取小滑块最大纵向移动距离
            var mvtop; //定义小滑块的纵向移动距离
            var mvleft; //定义小滑块的横向移动距离
            // 判断
            if (top < mintop) { 
                box.style.top = mintop + "px";
                mvtop = mintop;
                //理解：
                //top是鼠标到浏览器的垂直距离-左边div顶部到浏览器的垂直距离-小滑块的高度的一半。那么现在鼠标在小滑块的中心，也就是说，top就等于小滑块的顶部到左边div的垂直距离
                //那么，如果top<0,就是说小滑块和左边div顶部重合，就让小滑块的top值为0，即鼠标继续向上移动，小滑块不在移动，从而让小滑块的移动范围不能超过左边div的宽高范围
                //下方同理
            } else if (top > maxtop) { 
                box.style.top = maxtop + "px";
                mvtop = maxtop;
                //如果top>maxtop,就是说小滑块和左边div底部重合，就让小滑块的top值为maxtop，即鼠标继续向下移动，小滑块不在移动，从而让小滑块的移动范围不能超过左边div的宽高范围
            } else { 
                box.style.top = top + "px";
                mvtop = top;
                //不超过边界，则小滑块的垂直移动距离就等于top,即小滑块的顶部到左边div的垂直距离
            }
            if (left < minleft) { 
                box.style.left = minleft + "px";
                mvleft = minleft;
            } else if (left > maxleft) { 
                box.style.left = maxleft + "px";
                mvleft = maxleft;
            } else { 
                box.style.left = left + "px";
                mvleft = left;
            }
            //因为右边div的图片是左边div的图片的两倍,而左边div和右边div都是小滑块的宽高的两倍，而要让右边div放大左边的小滑块的包围图片，所以右边大图的定位坐标是小滑块的两倍，这样才能进行映射
            //右侧图片跟着运动:左侧小滑块移动多少，右侧跟着移动他的2倍即可
            rimg.style.top = -mvtop * 2 + "px";
            rimg.style.left = -mvleft * 2 + "px";
        }
    
        // 左侧盒子鼠标移入，小滑块和右侧图片显示,衔接鼠标移动效果
        //onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡。
        //该事件通常与 onmouseleave 事件一同使用。
        // leftone.onmouseenter = function(e){ 
        // var e=e||window.event; //判断事件源
        // box.style.display = "block";
        // getPosition(e);
        // rightone.style.display = "block";
        // }
    
        //鼠标移动效果
        leftone.onmousemove = function(e) { 
            var e = e || window.event; //判断事件源
            box.style.display = "block";
            getPosition(e);
            rightone.style.display = "block";
        };
    
        //鼠标移出效果
        leftone.onmouseleave = function(e) { 
            var e = e || window.event; //判断事件源
            box.style.display = "none";
            rightone.style.display = "none";
        };
    </script>
    </html>

[https_blog.csdn.net_yehaocheng520_article_details_119003274_spm_1001.2014.3001.5501]: https://blog.csdn.net/yehaocheng520/article/details/119003274?spm=1001.2014.3001.5501
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/19a8cea65a5c44899075d40171e361fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/dfdac7bb60c44b47af72933794b4e976.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/74f1d2907c1b4a039aefb365c64538a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220829/9de29611c40d4da09e8b557c1ff913e4.png