Javascript 鼠标滑过显示大图的效果

最近做一个网站，什么资料素材都没有~。所以前台设计和效果都要一人包办。这几天做了几个效果，其中就有鼠标滑过图片显示大图的一个效果。虽然网上有很多这样的案例，但是还是决定把这个效果作为博文发表出来。会做的，大家路过看一下，不会的可以参考参考。

View Code

1 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
2   < html xmlns = " http://www.w3.org/1999/xhtml " >
3 < head >
4 < meta http - equiv = " Content-Type " content = " text/html; charset=utf-8 " />
5 < title > 图片效果 </ title >
6 </ head >
7 < style >
8 .demo{overflow:hidden;width:120px;text - align:center;padding:10px;}
9 .demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
10 #enlarge_images{position:absolute;display:none;z - index: 2 ;}
11 #enlarge_images img{border:5px solid #f4f4f4;}
12 </ style >
13 < body >
14 < div id = " enlarge_images " >< img src = "" ></ div >
15 < div id = " box " >
16 < div class = " demo " >
17 < img src = " images/2.jpg " >
18 </ div >
19
20 < div class = " demo " >
21 < img src = " images/5.jpg " >
22 </ div >
23
24 < div class = " demo " >
25 < img src = " images/1.jpg " >
26 </ div >
27
28 < div class = " demo " >
29 < img src = " images/3.jpg " >
30 </ div >
31 </ div >
32
33 < script >
34 var maxsize = 400 ; // 图片最大尺寸
35 var obj = document.getElementById( " box " ).getElementsByTagName( " img " ),j = obj.length;
36 var bigpic = document.getElementById( " enlarge_images " );
37 for (i = 0 ; i < j; i ++ ){
38 obj[i].onmousemove = function(){
39 /* 调整图片尺寸start */
40 var thisimg = new Image()
41 thisimg.src = this .src
42 var r = thisimg.width / thisimg.height
43 if (r >= 1 ){w = maxsize;h = maxsize / r;}
44 else {w = maxsize * r;h = maxsize}
45 bigpic.getElementsByTagName( " img " )[ 0 ].style.width = w + " px " ;
46 bigpic.getElementsByTagName( " img " )[ 0 ].style.height = h + " px " ;
47 /* 调整图片尺寸end */
48 bigpic.style.display = " block " ;
49 bigpic.style.left = this .offsetWidth + 30 + " px " ;
50 bigpic.style.top = document.body.scrollTop + ( event || window. event ).clientY - 10 + " px " ;
51 bigpic.getElementsByTagName( " img " )[ 0 ].src = this .src;
52 }
53 obj[i].onmouseout = function(){
54 bigpic.style.display = " none " ;
55 bigpic.getElementsByTagName( " img " )[ 0 ].src = "" ;
56 }
57 obj[i].onclick = function(){
58 window.open( this .src);
59 }
60 }
61 </ script >
62 </ body >
63 </ html >

上面的一种方法并不是很好，所以我采用JQuery，解决这个问题。

 JQuery效果 

转载于:https://www.cnblogs.com/ykblog/archive/2011/04/13/2015072.html