前端-css-js，放大镜

tl110110tl

已于 2022-04-07 13:20:07 修改

阅读量636

点赞数

分类专栏：前端文章标签： css javascript

于 2022-04-07 10:20:59 首次发布

本文链接：https://blog.csdn.net/tl110110tl/article/details/124006578

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.html骨架如下

<body>
	<div class="box" id="box">
		<div class="smallbox" id="smbox">
			<img src="images/1.jpg" alt="" />
			<div class="smalldiv" id="smdiv"></div>	
		</div>
		<div class="bigdiv" id="bigdiv">
			<img src="images/1.jpg" alt="" id="bigimg" />
		</div>
	</div>
</body>

2.用CSS调整成如下样子即可

可以这样理解，页面中，有2个图（smallimg，bigimg）。还有两个div（smalldiv是透明图，bigdiv展示大图用）。

两个div都分别比两个图小。

小div（透明图）跟随鼠标在小图上移动（这是小div在动），同时大图再大div中移动（这是大图在动），但是整体的感觉，依然是，2个div压住2个图，并展示2个图的部分内容。

<style type="text/css">
	*{margin: 0;padding: 0;}
	.box {
		width: 400px;
		height: 400px;
		position: relative;
		top:20px;
		left:100px;
		background-color: #fff;
	}
	.box .smallbox img{
		width: 400px;
		height: 400px;
	}
	.box .smallbox{
	position: relative;
	}
	.box .smallbox .smalldiv{
		opacity: 0.3;
		width: 300px;
		height: 300px;
		background-color: #f0f;
		position: absolute;
		top:0;
		left:0;
		cursor: move;
		/*display:none;*/
	}
	.box .bigdiv {
		position: absolute;
		top :0;
		left : 420px;
		width: 600px;
		height: 600px;
		border: 1px solid #000;
		/*overflow: hidden;*/
		/*display: none;*/
	}
	.box .bigdiv img{
		position: absolute;
		top:0;
		left:0;
	}
</style>

3.保证2个比例，即可实现。

①小图/小div == 大图/大div，这里原图是800*800，所以我将大div设置为600*600，将小图和小div设置为400*400，300*300。如此这样，400/300 == 800/600

②再计算小div的移动位置时，大图对应的移动位置应当与之相反，且是一个比值。

即（小图的移动距离 * （-1）* （大图宽高/小图宽高））

或（小图的移动距离 * （-1）* （大div宽高/小div宽高））

4.js代码如下。主要能计算出小div（透明图）的位置即可。

小div的位置，应当是当前鼠标的clientX - 小div距离左侧屏幕的位置。

js代码中，小div距离左侧屏幕的位置恰巧等于box距离左侧屏幕位置。

<script type="text/javascript">
	onload=function(){
		var box = document.getElementById("box");
		var smbox = document.getElementById("smbox");
		var smdiv = document.getElementById("smdiv");
		var bigdiv = document.getElementById("bigdiv");
		var bigimg = document.getElementById("bigimg");
		smbox.onmousemove = function(event){
			var event = event|| window.event;
			var x = event.clientX - box.offsetLeft - smdiv.offsetWidth/2;//鼠标现在距离box左边的距离
			var y = event.clientY - box.offsetTop - smdiv.offsetHeight/2;
			if(x <0 ){
				x = 0;
			}
			if(x > box.offsetWidth - smdiv.offsetWidth){
				x = box.offsetWidth - smdiv.offsetWidth;
			}
			if(y < 0 ){
				y= 0 ;
			}
			if(y > box.offsetHeight - smdiv.offsetHeight){
				y = box.offsetHeight - smdiv.offsetHeight;
			}

			smdiv.style.left =  x + "px";
			smdiv.style.top =  y + "px";
			bigimg.style.left = x *(-1) * (bigdiv.offsetWidth/smdiv.offsetWidth) + "px";
			bigimg.style.top = y *(-1) * (bigdiv.offsetHeight/smdiv.offsetHeight) +"px";
			

		}
		smbox.onmouseover = function(){
			smdiv.style.display = "block";
			bigdiv.style.display = "block";
		}
		smbox.onmouseout = function(){
			smdiv.style.display = "none";
			bigdiv.style.display = "none";
		}
	}
</script>