最近做一个网站，什么资料素材都没有~。所以前台设计和效果都要一人包办。这几天做了几个效果，其中就有鼠标滑过图片显示大图的一个效果。虽然网上有很多这样的案例，但是还是决定把这个效果作为博文发表出来。会做的，大家路过看一下，不会的可以参考参考。
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;120px;text-align:center;padding:10px;}
9 .demo img{border:none;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>
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;120px;text-align:center;padding:10px;}
9 .demo img{border:none;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，解决这个问题。