Ferris教程学习笔记:js示例2.16 鼠标移过，改变图片路径

//这个案例知识点比较多..
1:first 下的div是用来显示加载图片过程时的"加载图片.."
当图片加载成功后隐藏
加载过程中显示
2:new Image()对象
动态加载图片时使用的对象，常用做预加载中
/mg 有一个属性.complete 图片加载完成 true
否则为false
onload 加载完成后自动执行方法隐藏

 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"><head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=gbk">
 4 <title>鼠标移过，改变图片路径</title>
 5 <style type="text/css">
 6 body,ul,li{margin:0;padding:0;}
 7 body{background:#000;}
 8 img{border:0;border-radius:3px;}
 9 ul{list-style-type:none;}
10 #box{width:212px;border;5px solid #fff;overflow:hidden;zoom:1;
11 background:#fff;border-radius:5px;margin:10px auto;padding:0 0 3px 3px;}
12 #box li,#box li img{float:left;width:50px;height:50px;}
13 #box li{margin:3px 3px 0 0;}
14 #box li.first{position:relative;}
15 #box li.first,#box li.first img{width:156px;height:156px;}
16 #box li.first div{position:absolute;top:0;left:0;width:156px;
17 height:156px;display:none;opacity:0.5;filter:alpha(opacity=50);
18 background:#fff url(img/loading.gif) 50% 50% no-repeat;}
19 </style>
20 </head>
21 <body>
22 <ul id="box">
23  <li class="first">
24   <img src="11/big_2.jpg" />
25   <div style="display:none;"></div>
26  </li>
27  <li><a href="javascript:;"><img src="11/small_1.jpg"/></a></li>
28  <li><a href="javascript:;"><img src="11/small_2.jpg"/></a></li>
29  <li><a href="javascript:;"><img src="11/small_3.jpg"/></a></li>
30  <li><a href="javascript:;"><img src="11/small_4.jpg"/></a></li>
31  <li><a href="javascript:;"><img src="11/small_5.jpg"/></a></li>
32  <li><a href="javascript:;"><img src="11/small_6.jpg"/></a></li>
33  <li><a href="javascript:;"><img src="11/small_7.jpg"/></a></li>
34  <li><a href="javascript:;"><img src="11/small_8.jpg"/></a></li>
35  <li><a href="javascript:;"><img src="11/small_9.jpg"/></a></li>
36  <li><a href="javascript:;"><img src="11/small_10.jpg"/></a></li>
37  <li><a href="javascript:;"><img src="11/small_11.jpg"/></a></li> 
38 </ul>
39 <script type="text/javascript">
40  window.onload = function(){
41    var div = document.getElementsByTagName("div")[0];
42    var images = document.getElementById("box").getElementsByTagName("img");
43    
44    for(var i=1;i<images.length;i++){
45       images[i].onclick = function(){
46         
47         //创建一个Image图片对象作用是预加载图片
48         var img = new Image();
49         img.src = images[0].src = this.src.replace(/small/,"big");
50         div.style.display = "block";
51         img.complete ? div.style.display = "none":(images[0].onload = function(){div.style.display = "none";})
52       };
53    }
54  }
55  
56  //----------------------------------
57  //这个案例知识点比较多..
58  //1:first 下的div是用来显示加载图片过程时的"加载图片.."
59  //当图片加载成功后隐藏
60  //加载过程中显示
61  //2:new Image()对象
62  //动态加载图片时使用的对象，常用做预加载中
63  //img 有一个属性.complete 图片加载完成 true
64  //                        否则为false
65  //onload 加载完成后自动执行方法隐藏
66 </script>
67 </body>
68 </html>

Ferris教程学习笔记:js示例2.16 鼠标移过，改变图片路径

相关推荐