forked from anbang/javascript-notes
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index2.html
123 lines (114 loc) · 4.22 KB
/
index2.html
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子商务网站放大镜效果</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
#tab { position: relative; width: 300px; height: 300px;margin: 50px ; background: #CDE074; }
#mark { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: #B00000; opacity: 0.5; filter: alpha(opacity=50); cursor: move; }
#container{ position:absolute; height:360px; width:360px; background:pink; overflow:hidden;left: 350px;top: 0px}
#bigImg{ position:absolute; display:block; border:none;}
</style>
</head>
<body>
<div id="tab">
<img src="img/smallPeony.jpg" width="300" height="300" id="img1">
</div>
<div id="jiance"></div>
</body>
</html>
<script type="text/javascript">
//获得oDiv本身的高和宽；获得oDiv距离浏览器左上角的位移；
var oDiv = document.getElementById("tab");
var off = offset.call(oDiv);
oDiv.onmouseenter = function (e) {
//小图
var mark = document.createElement("div");
mark.id = "mark";
this.appendChild(mark);
//创建大图容器
var container = document.createElement("div");
container.id = "container";
this.appendChild(container);
var bigImg=document.createElement("img");
bigImg.src="img/peony.jpg";
bigImg.id="bigImg";
container.appendChild(bigImg);
setMark(mark, container, e);
}
oDiv.onmousemove = function (e) {
var mark = document.getElementById("mark");
if (mark) {
critical(this, mark, e);
}
}
oDiv.onmouseleave = function (e) {
var mark = document.getElementById("mark");
if (mark) {
this.removeChild(mark);
}
}
function critical(oDiv, mark, e) {
e = e || window.event;
var l = e.clientX - off.left - (mark.offsetWidth / 2);
var t = e.clientY - off.top - (mark.offsetHeight / 2);
mark.style.top = t + "px";
mark.style.left = l + "px";
if (l <= 0) {
mark.style.left = 0;
} else if (l >= (oDiv.offsetWidth - mark.offsetWidth)) {
mark.style.left = oDiv.offsetWidth - mark.offsetWidth + "px";
}
if (t <= 0) {
mark.style.top = 0;
} else if (t >= (oDiv.offsetHeight - mark.offsetHeight)) {
mark.style.top = oDiv.offsetHeight - mark.offsetHeight + "px";
}
}
function setMark(mark,container,e) {
e = e || window.event;
//上面是绑定事件的标配；
//获取mark这个div的宽度和高度；并且让mark这个DIV显示在鼠标出现位置的正中间；
var markW = mark.offsetWidth;
var markH = mark.offsetHeight;
var l = e.clientX - tabL - (markW / 2);
var t = e.clientY - tabT - (markH / 2);
mark.style.left = l + "px";
mark.style.top = t + "px";
container.style.left=tabW+10+"px";
container.style.top=0;
bigImg.style.left="-"+l/tabW*bigImg.width+"px";
bigImg.style.top="-"+t/tabH*bigImg.height+"px";
//下面是判断边界，当鼠标移到左边界和右边界的判断；
if (l-15 < 0) {
mark.style.left = 0;
} else if (l > (tabW - markW)) {
mark.style.left = tabW - markW + "px";
bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px";
}
//当鼠标移到上边界和下边界的判断；
if (t < 0) {
mark.style.top = 0 + "px";
} else if (t > (tabH - markH)) {
mark.style.top = tabH - markH + "px";
bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px";
}
};
function offset() {
var left = this.offsetLeft, top = this.offsetTop, par = this.offsetParent;
while (par) {
left += par.offsetLeft;
top += par.offsetTop;
if (window.navigator.userAgent.indexOf("MSIE 8.0") <= -1) {
left += par.clientLeft;
top += par.clientTop;
}
par = par.offsetParent;
}
return {
left: left,
top: top
};
}
</script>