放大镜

这个效果的实现是有点难度的,我们慢慢攻克吧
首先来点样式布局吧,这里就不多加赘述了

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
         body{
	background: #333;
	margin:0;
	padding:0;
}
.box{
	position: absolute;
	top:100px;
	left:200px;
	width:460px;
	height:360px;
}
.main{
	position: absolute;
	width: 200px;
	height: 200px;
	border:1px solid #fff;
	z-index: 2;
	cursor: move;
}
.minDiv{
	width:8px;
	height:8px;
	background: #fff;
	font-size: 0;
	position: absolute;
}
.minDiv.left-up{
	top:-4px;
	left: -4px;
	cursor:nw-resize;
}
.minDiv.left{
	top:50%;
	margin-top:-4px;
	left: -4px;
	cursor:w-resize;
}
.minDiv.left-down{
	bottom:-4px;
	left: -4px;
	cursor:sw-resize;
}
.minDiv.top{
	top:-4px;
	left: 50%;
	margin-left:-4px;
	cursor:n-resize;
}
.minDiv.right-up{
	top:-4px;
	right: -4px;
	cursor:ne-resize;
}
.minDiv.right{
	top:50%;
	margin-top:-4px;
	right: -4px;
	cursor:e-resize;
}
.minDiv.right-down{
	bottom:-4px;
	right: -4px;
	cursor:se-resize;
}
.minDiv.bottom{
	bottom:-4px;
	left: 50%;
	margin-left:-4px;
	cursor:s-resize;
}
img{
	position: absolute;
	z-index: 1
}
.img1{
	opacity: 0.5
}
.img2{
	clip:rect(0px,20px,100px,100px);
}
#preview{
	position: absolute;
	overflow: hidden;
	top:100px;
	left:680px;
	width:460px;
	height:360px;
}
#preview #img3{
	position: absolute;
	top:0;
	left:0;
}

接下来是主体部分了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
       <div id="box" class="box">
		<img class="img1" src="js/1.jpg"/>
		<img id="img2" class="img2" src="js/1.jpg"/>
		<div class="main" id="main">
			<div id="left-up" class="minDiv left-up"></div>
			<div id="left" class="minDiv left"></div>
			<div id="left-down" class="minDiv left-down"></div>
			<div id="up" class="minDiv top"></div>
			<div id="right-up" class="minDiv right-up"></div>
			<div id="right" class="minDiv right"></div>
			<div id="right-down" class="minDiv right-down"></div>
			<div id="down" class="minDiv bottom"></div>
		</div>
	</div>
	<div id="preview">
		<img id="img3" class="img3" src="js/1.jpg"/>
	</div>
</body>
<script src="js/main.js"></script>

最后就是我们渴望的js啦

先获取一下元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//防止图片被选中
document.onselectstart=new Function('event.returnValue=false;');
var boxDiv = document.getElementById('box');//外层容器
var mainDiv = document.getElementById('main');//选择层
var leftUpDiv = document.getElementById('left-up');//坐上角触点
var leftDiv = document.getElementById('left');//左中间触点
var leftDownDiv = document.getElementById('left-down');//左下角触点
var upDiv = document.getElementById('up');//上中间触点
var downDiv = document.getElementById('down');//下中间触点
var rightUpDiv = document.getElementById('right-up');//右上角触点
var rightDiv = document.getElementById('right');//右中间触点
var rightDownDiv = document.getElementById('right-down');//右下角触点
var img3=document.getElementById('img3');
var ifBool = false;//判断鼠标是否按下
var contact = "";//当前拖动的触点

左边拖动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//防止图片被选中
document.onselectstart=new Function('event.returnValue=false;');
var boxDiv = document.getElementById('box');//外层容器
var mainDiv = document.getElementById('main');//选择层
var leftUpDiv = document.getElementById('left-up');//坐上角触点
var leftDiv = document.getElementById('left');//左中间触点
var leftDownDiv = document.getElementById('left-down');//左下角触点
var upDiv = document.getElementById('up');//上中间触点
var downDiv = document.getElementById('down');//下中间触点
var rightUpDiv = document.getElementById('right-up');//右上角触点
var rightDiv = document.getElementById('right');//右中间触点
var rightDownDiv = document.getElementById('right-down');//右下角触点
var img3=document.getElementById('img3');
var ifBool = false;//判断鼠标是否按下
var contact = "";//当前拖动的触点

右边拖动

1
2
3
4
5
6
7
8
9
10
11
12
13
//右边拖动
function rightMove(e){
	var x = e.clientX;//鼠标横坐标
	if(x > getPosition(boxDiv).left + boxDiv.offsetWidth){
		x = getPosition(boxDiv).left + boxDiv.offsetWidth;
	}
	var width = mainDiv.clientWidth;//选择层宽度
	var mainX = getPosition(leftUpDiv).left + 4;//左上角横坐标
	var addWidth = x - width - mainX;//拖动后应该增加的宽度
	//设置拖动后的宽高和位置
	mainDiv.style.width = (width + addWidth) + "px";
}

上边拖动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//上边拖动
function upMove(e){
	var y = e.clientY;//鼠标纵坐标
	if(y < getPosition(boxDiv).top){
		y = getPosition(boxDiv).top;
	}
	var height = mainDiv.clientHeight;//选择层的高度
	console.log(height);
	var mainY = getPosition(leftUpDiv).top + 4;//左上角纵坐标
	var addHeight = mainY - y;//拖动后应该增加的高度
	//设置拖动后的宽高和位置
	mainDiv.style.height = (height + addHeight) + "px";
	mainDiv.style.top = mainDiv.offsetTop - mainY + y + "px"; //纵坐标减去增加的高度
}

下边拖动

1
2
3
4
5
6
7
8
9
10
11
12
//下边拖动
function downMove(e){
	var y = e.clientY;//鼠标纵坐标
	if(y > getPosition(boxDiv).top + boxDiv.offsetHeight){
		y = getPosition(boxDiv).top + boxDiv.offsetHeight;
	}
	var height = mainDiv.clientHeight;//选择层的高度
	var mainY = getPosition(leftUpDiv).top + 4;//左上角纵坐标
	var addHeight = y - mainY - height;//拖动后应该增加的高度
	mainDiv.style.height = (height + addHeight) + "px";
}

设置选择区域可见

1
2
3
4
5
6
7
8
9
10
//设置选择区域可见
function setChoice(){
	var top = mainDiv.offsetTop;
	var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
	var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
	var left = mainDiv.offsetLeft;
	document.getElementById("img2").style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
	preview({"top":top,"right":right,"bottom":bottom,"left":left});
}

获取元素的绝对位置

1
2
3
4
5
6
7
8
9
10
11
12
13
//获取元素的绝对位置
function getPosition(node){
	var left = node.offsetLeft;
	var top = node.offsetTop;
	current = node.offsetParent; // 取得元素的offsetParent
	　// 一直循环直到根元素
　　while (current != null) {
	　　left += current.offsetLeft;
	　　top += current.offsetTop;
	　　current = current.offsetParent;
　　}
	return {"left":left,"top":top};
}

预览一下

1
2
3
4
5
6
7
//预览
function preview(view){
	img3.style.top = -view.top + "px";
	img3.style.left = -view.left + "px";
	img3.style.clip = "rect("+view.top+"px,"+view.right+"px,"+view.bottom+"px,"+view.left+"px)";
}

鼠标按下事件

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
54
55
56
57
58
59
60
61
62
63
64
65
//鼠标按下-左上角
leftUpDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "leftUp";
};
//鼠标按下-左中间
leftDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "left";
};
//鼠标按下-左下角
leftDownDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "leftDown";
};
//鼠标按下-上边
upDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "up";
};
//鼠标按下-下边
downDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "down";
};
//鼠标按下-右上角
rightUpDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "rightUp";
};
//鼠标按下-右中间
rightDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "right";
};
//鼠标按下-右下角
rightDownDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "rightDown";
};

拖动

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
//拖动
window.onmousemove = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	if(ifBool){
		switch(contact){
			case "leftUp":leftMove(e);upMove(e);break;
			case "left":leftMove(e);break;
			case "leftDown":leftMove(e);downMove(e);break;
			case "up":upMove(e);break;
			case "down":downMove(e);break;
			case "rightUp":rightMove(e);upMove(e);break;
			case "right":rightMove(e);break;
			case "rightDown":rightMove(e);downMove(e);break;
			default:alert("操作错误！");
		}
	var width = mainDiv.offsetWidth;
	var height = mainDiv.offsetHeight;
	setChoice();
	}
};
//鼠标松开
window.onmouseup = function(){
	ifBool = false;
	contact = "";
};
//鼠标点击控制mainDiv的移动
mainDiv.onmousedown=function(e){
	var ev=e||window.event;
	boxDiv.onmousemove=function(e){
		var ev=e||window.event;
		var disx=ev.clientX;
		var disy=ev.clientY;
		var moveX=disx-boxDiv.offsetLeft-mainDiv.offsetWidth/2;
		// console.log(moveX);
		var moveY=disy-boxDiv.offsetTop-mainDiv.offsetHeight/2;
		// console.log(moveY);
		var maxWidth=boxDiv.clientWidth-mainDiv.offsetWidth;
		var maxHeight=boxDiv.clientHeight-mainDiv.offsetHeight;
		if(moveX<0){
			moveX=0;
		}else if(moveX>maxWidth){
			moveX=maxWidth;
		}
		if(moveY<0){
			moveY=0;
		}else if(moveY>maxHeight){
			moveY=maxHeight;
		}
		mainDiv.style.left=moveX+"px";
		mainDiv.style.top=moveY+"px";
		img3.style.left=-moveX+"px";
		img3.style.top=-moveY+"px";
		//右边展示区域的范围
		preview({"top":mainDiv.offsetTop,"left":mainDiv.offsetLeft,"bottom":mainDiv.offsetTop+mainDiv.offsetHeight,"right":mainDiv.offsetLeft+mainDiv.offsetWidth});
		//可见区域的范围
		setChoice();
	}
	mainDiv.onmouseup=function(){
		boxDiv.onmousemove="";
	}
}
setChoice();//初始化选择区域可见

看到此博客的伙伴们,记得点赞哦!

很惭愧<br><br>只做了一点微小的工作<br><br>我会继续努力<br><br>谢谢大家