放大镜的设计与实现

JavaScript 评论

喜欢购物的童鞋会发现，PC端的电商详情页总喜欢用一个放大镜的效果来实现顾客查看图片的细节，貌似很好玩，业余时间来给大家科普实现的方法，当然是怎么简单怎么来，适合初出茅庐的童鞋，大神们也欢迎来点评下。

1.实现原理

1.原理图

图里面的节点关系看下边页面结构层（html文件）
js实现原理：
1.首先鼠标移入容器”.wrap”或者”.show”时，显示”.show span”和”.show-ks”,当然，进入页面的时候他们要默认隐藏（display：none）；当鼠标移出的时候还要再次隐藏他们
2.然后就是鼠标在容器”.wrap”内移动的时候，要让小容器”.show span”跟随鼠标移动，使鼠标一直在小容器”.show span”正中间
3.相对位移问题，鼠标在容器”.wrap”中移动的时候，右边容器”.show-ks”的图片要显示”.show span”范围的图片内容，这样就有了放大的效果。
单拿上边距（top,offsetTop）来说明一下比例问题：

1
2
3
4
5
var wrap = document.querySelector('.wrap');
var show = wrap.querySelector('.show');
var showSpan = show.querySelector('span');
var showKs = wrap.querySelector('.show-ks');
var showBig = showKs.querySelector('span');

showspan的上边距就是

1
var Top = Y-showSpan.offsetHeight/2;

假设showBig的上边距应该是Top2，那么比例式子就是：

1
2
Top/(wrap.offsetHeight-showSpan.offsetHeight)=Top2/(showBig.offsetHeight-showKs.offsetHeight)

左边距的entity就和上边距的问题一样，迎刃而解

2.代码

1.结构层（html）

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="wrap">
	<div class="show">
	<img src="./img/img1.jpg" alt="">
		<span>
			
		</span>
	</div>
	<div class="show-ks">
		<span>
			
		</span>
	</div>
</div>

2.表现层（css）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
*{
		padding:0;
		margin:0;
	}
	.wrap{
		width:418px;
		height:418px;
		background: red;
		position:relative;
		margin:50px;
		cursor: move;
	}
	.show{
		width:418px;
		height:418px;
		background: orange;
		position: relative;
	}
	.show img{
		width:100%;
	}
	.show span{
		display:none;
		width:218px;
		height:218px;
		background: rgba(108,158,248,0.5);
		position: absolute;
		top:0;
		left:0;
	}
	.show-ks{
		display:none;
		width:418px;
		height:418px;
		background: blue;
		position: absolute;
		top:0;
		left:428px;
		overflow: hidden;
	}
	.show-ks span{
		display:block;
		width:800px;
		height:800px;
		background: url(./img/img1.jpg);
		position: absolute;
		top:0;
		left:0;
	}

3.行为层（js）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
window.onload=function(){
	//获取所需要的事件源
	var wrap = document.querySelector('.wrap');
	var show = wrap.querySelector('.show');
	var showSpan = show.querySelector('span');
	var showKs = wrap.querySelector('.show-ks');
	var showBig = showKs.querySelector('span');
	// 添加/监控鼠标移入事件
	show.addEventListener('mouseover',function(){
		showSpan.style.display = 'block';
		showKs.style.display = 'block';
		//监听鼠标移动事件
		wrap.addEventListener('mousemove',function(e){
			//处理兼容性
			var e = window.e||e;
			//实时的获取鼠标相对于wrap容器的横纵坐标(X,Y)
			var X = e.clientX-this.offsetLeft;
			var Y = e.clientY-this.offsetTop;
			//通过鼠标横纵坐标(X,Y)，减去showspan宽度/高度的一半，使得鼠标一直在showspan的正中间
			var Left = X-showSpan.offsetWidth/2;
			var Top = Y-showSpan.offsetHeight/2;
			//防止showspan1跑出show容器外，判断Left和Top值，
			if(Left < 0){
				Left = 0;
			}else if(Left > this.offsetWidth-showSpan.offsetWidth){
				Left = this.offsetWidth-showSpan.offsetWidth;
			}
			if(Top < 0){
				Top = 0;
			}else if(Top > this.offsetHeight-showSpan.offsetHeight){
				Top = this.offsetHeight-showSpan.offsetHeight;
			}
			showSpan.style.left = Left+'px';
			showSpan.style.top = Top+'px';
			//对应大图的偏移量
				//根据原理中的比例等式，获取并设置大图应有的相对偏移量
			var  bigTop = Top/(this.offsetHeight-showSpan.offsetHeight)*(showBig.offsetHeight-showKs.offsetHeight);
			var  bigLeft = Left/(this.offsetWidth-showSpan.offsetWidth)*(showBig.offsetWidth-showKs.offsetWidth);
			showBig.style.top = -bigTop+'px';
			showBig.style.left = -bigLeft+'px';
			
		})
		
		
		
	});
	//添加鼠标移出事件
	show.addEventListener('mouseout',function(){
		showSpan.style.display = 'none';
		showKs.style.display = 'none';
	});
	
}　　　

3.注意

可能有童鞋疑惑为什么不直接用pageX和PageY，恩，感兴趣可以自己试一试，博主试了试有点问题，所以委曲求全。
哪里不对的，希望过路的大神不吝赐教。

BruceLeeWeb Developer

个人简介。