//这个案例知识点比较多..
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>