前端——js 天猫商品图放大镜效果、鼠标移动显示放大效果、（查看图片细节）

本文链接：https://blog.youkuaiyun.com/qq_41141657/article/details/88621260

该博客介绍了使用JS实现图片放大镜效果的方法。包括页面布局，在正常图片上放半透明色块，右侧隐藏大图；页面样式设置；给左侧图片添加鼠标移动事件；分析色块抖动原因并解决；保证色块不超出边框；控制右侧大图显示；处理鼠标移入移出事件，还给出了源代码和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.页面布局

定位一个正常的图片，上面放一个可被鼠标移动的半透明的色块，
在图片右侧隐藏一个更大的图片，
当半透明色块移动时显示右侧大图的对应部分

注：如果想在网页中查看源代码提取文件，提取不到大图，可以直接Ctrl+s保存网页全部内容

       <div id="left">
	    	<div id="box"></div>
	    </div>
	    
	    <div id="right">
	    	<img id="bbox" src="../HTML/img/big.jpg"></img>
	    </div>

2.页面样式

为了让色块可以在图片中移动，需要给图片相对定位，色块绝对定位，便于给色块进行位置赋值
为了让大图根据色块进行位置变化，需要给右边外框相对定位，图片绝对定位
分别给左右框左浮动，保障放大图出现在正常图旁边

*{
				padding:0;
				margin: 0;
			}
			#left{
				width: 400px;
				height: 400px;
				border: 1px solid black;
				margin:20px;
				background-image: url(../HTML/img/small.jpg);
				background-size: 100% 100%;
				position: relative;
				float: left;
			}
			#box{
				width: 220px;
				height: 200px;
				background:white;
				/*透明度*/
				opacity: 0.4;
				/*方块要动所以给他一个定位*/
				position: absolute;
			}
			#right{
				width: 440px;
				height: 400px;
				border: 1px solid black;
				position: relative;
				float: left;
				margin:20px;
				overflow: hidden;
			}
			#bbox{
				position: absolute;
				left: 0;
				top: 0;
			}

3.给左侧图片加鼠标移动事件

1）鼠标移动函数

left.onmousemove=function(e){      }

2）获得兼容的事件对象（鼠标位置）
window.event：ie解析这个 e:谷歌，火狐解析这个

var move=window.event||e;

3）获得鼠标距离事件源的位置（需要先给事件源一个相对定位)
move.offsetX:IE浏览器上的获取方法,e.offsetX:非IE浏览器的获取方法

var move_left=move.offsetX||e.offsetX;
var move_top=move.offsetY||e.offsetY;

4）为了让鼠标在色块中心时色块开始正式移动,所以鼠标位置减去色块的一边才是色块距离边框的真实距离
在这里插入图片描述

var box_left=move_left-110;
var box_top=move_top-100;

5）将计算好的位置赋值给色块

box.style.left=box_left+"px";
box.style.top=box_top+"px";

4.色块在触碰过程中会抖动的原因

鼠标和事件源之间如果有其他元素存在,效果的触发就会有问题（图片作为事件源，色块影响了效果）
所以要避免鼠标与事件源有其他元素,可以在色块和图片上在加一个盒子,让鼠标在盒子上移动

<div id="new"></div>

调整盒子的位置，保证盒子透明

#new{
				width: 400px;
				height: 400px;
				background: blue;
				position: absolute;
				top: 0;
				left: 0;
				/*背景设置成透明*/
				opacity: 0;
				/*鼠标变成十字*/
				cursor: crosshair;
			}

5.保证色块不超出表框

所以当计算好色块的距离小于0时,不再让色块在移动而是等于0
判断结束后再进行赋值

if(box_left<0){
              	box_left=0;
              }
              if(box_top<0){
              	box_top=0;
              }
              if(box_left>180){
              	box_left=180;
              }
              if(box_top>200){
              	box_top=200;
              }

6.控制右侧显示大图

右侧整个大图片800x800
1）根据对应色块移动，大图在框内的显示位置可得到关系式

var bbox_left=box_left*-2;
var bbox_top=box_top*-2;

2）将计算的值赋值

bbox.style.left=bbox_left+"px";
bbox.style.top=bbox_top+"px";

7.当鼠标移入移出色块

1）鼠标未移入前色块，右侧大图不显示

#box,#right{
				display: none; 			}

2）鼠标移入事件，色块显示 ,右侧大图显示

newleft.onmouseover=function(){
            	box.style.display="block";
            	right.style.display="block";
            }

3）鼠标移出事件色块显示 ,右侧大图消失

newleft.onmouseout=function(){
            	box.style.display="none";
            	right.style.display="none";
            }

8.源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		
			*{
				padding:0;
				margin: 0;
			}
			#left{
				width: 400px;
				height: 400px;
				border: 1px solid black;
				margin:20px;
				background-image: url(../HTML/img/small.jpg);
				background-size: 100% 100%;
				position: relative;
				float: left;
			}
			#box{
				width: 220px;
				height: 200px;
				background:white;
				/*透明度*/
				opacity: 0.4;
				/*方块要动所以给他一个定位*/
				position: absolute;
			}
			#right{
				width: 440px;
				height: 400px;
				border: 1px solid black;
				position: relative;
				float: left;
				margin:20px;
				overflow: hidden;
			}
			#bbox{
				position: absolute;
				left: 0;
				top: 0;
			}
			#new{
				width: 400px;
				height: 400px;
				background: blue;
				position: absolute;
				top: 0;
				left: 0;
				/*背景设置成透明*/
				opacity: 0;
				/*鼠标变成十字*/
				cursor: crosshair;
			}
			#box,#right{
				display: none;
			}
		</style>
	</head>
	<body>
	
	    <div id="left">
	    	<div id="box"></div>
	    	<div id="new"></div>
	    </div>
	    
	    <div id="right">
	    	<img id="bbox" src="../HTML/img/big.jpg"></img>
	    </div>
	    
	    <script>

	    	var left=document.getElementById("left");
	    	var box=document.getElementById("box");
	    	var right=document.getElementById("right");
	    	var bbox=document.getElementById("bbox");
	    	var newleft=document.getElementById("new");
	    	
//	    	给左侧小图加鼠标移动事件
            newleft.onmousemove=function(e){
//          	鼠标移动函数
                var move=window.event||e;
//              获得兼容的事件对象
                var move_left=move.offsetX||e.offsetX;
//              获得鼠标距离事件源的位置
                var move_top=move.offsetY||e.offsetY;

//              为了让鼠标在色块中心时色块开始正式移动,所以鼠标位置减去色块的一边才是色块距离边框的真实距离
                var box_left=move_left-110;
                var box_top=move_top-100;

              当计算好的距离小于0时,不再让色块在移动而是等于0
              if(box_left<0){
              	box_left=0;
              }
              if(box_top<0){
              	box_top=0;
              }
              if(box_left>180){
              	box_left=180;
              }
              if(box_top>200){
              	box_top=200;
              }

//              将计算好的位置赋值给色块
                box.style.left=box_left+"px";
                box.style.top=box_top+"px";
                             
             var bbox_left=box_left*-2;
             var bbox_top=box_top*-2;
//           将计算的值赋值
             bbox.style.left=bbox_left+"px";
             bbox.style.top=bbox_top+"px";
             
            }
//          鼠标移入事件
            newleft.onmouseover=function(){
            	box.style.display="block";
            	right.style.display="block";
            }
//          鼠标移出事件
            newleft.onmouseout=function(){
            	box.style.display="none";
            	right.style.display="none";
            }
	    </script>
	</body>
</html>