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 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <head> <meta http-equiv= "Content-Type"
content= "text/html; charset=utf-8"
/> <title>无标题文档</title> <style type= "text/css" > *{padding:0; margin:0;} #main{margin:0px;} .smallPic{ width:202px; height:202px; border:1px
#b7b7b7 solid; text-align:center; float:left; margin-right:5px; position:relative;} .smallPic .mouse{ width:50px; height:50px; position:absolute; left:1px; top:1px; border:1px solid
#ccc; display:none;-moz-opacity: 0.8; background:#fff; opacity:.80; filter: alpha(opacity=80);} .bigPic{ width:302px; height:302px; border:1px solid
#b7b7b7; text-align:center; float:left; display:none; overflow:hidden; position:relative;} .bigPic img{ position:absolute; left:0; top:0;} img{ margin-top:1px;} </style> <script type= "text/javascript" > window.onload = function
(){ var
magnifier = function
(){ this .main = document.getElementById( "main" ); this .smallPic = this .main.getElementsByTagName( "div" )[0]; this .mouseBlock = this .smallPic.getElementsByTagName( "p" )[0]; this .bigPic = this .main.getElementsByTagName( "div" )[1]; this .displayBigPic(); } magnifier.prototype = { displayBigPic : function
(){ var
_this = this ; this .smallPic.onmouseover = function
(ev){ var
oEvent = ev || event; _this.bigPic.style.display = "block" ; _this.mouseBlock.style.display = "block" ; _this.mouseBlock.style.left = oEvent.clientX - _this.mouseBlock.offsetWidth / 2 - _this.main.offsetLeft + "px" ; _this.mouseBlock.style.top = oEvent.clientY - _this.mouseBlock.offsetHeight / 2 - _this.main.offsetTop + "px" ; } this .smallPic.onmouseout = function
(){ _this.bigPic.style.display = "none" ; _this.mouseBlock.style.display = "none" ; } }, } var
a = new
magnifier(); } </script> </head> <body> <div id= "main" > <div class = "smallPic" > <p class = "mouse" ></p> <img src= "images/small.png"
/> </div> <div class = "bigPic" > <img src= "images/big.png"
/> </div> </div><br> </body> </html> |
原文:http://www.cnblogs.com/xy404/p/3657687.html