//思路:
//通过透明度的变化实现效果
1:注意代码a 清除元素class值
2:注意代码b 当前元素添加class值
这个示例需要几张图片，在随笔中没有发现上传附件的功能，你需要去Ferris 站点下载 :(
http://js.fgm.cc/learn/
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 ul,li{margin:0;padding:0;list-style-type:none;} 7 #imgList{width:700px;overflow:hidden;zoom:1;border:1px solid #333;margin:0 auto;padding:0 0 10px 10px;} 8 #imgList li{float:left;width:128px;height:128px;border:1px solid #ccc;margin:10px 10px 0 0;} 9 #imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);} 10 #imgList li.current img{opacity:1;filter:alpha(opacity=100);} 11 </style> 12 </head> 13 <body> 14 <ul id="imgList"> 15 <li class=""><img src="06/1.jpg"></li> 16 <li class=""><img src="06/2.jpg"></li> 17 <li class=""><img src="06/3.jpg"></li> 18 <li class=""><img src="06/4.jpg"></li> 19 <li class=""><img src="06/5.jpg"></li> 20 <li class=""><img src="06/6.jpg"></li> 21 <li class=""><img src="06/7.jpg"></li> 22 <li class=""><img src="06/8.jpg"></li> 23 <li class=""><img src="06/9.jpg"></li> 24 <li class=""><img src="06/10.jpg"></li> 25 </ul> 26 27 <script type="text/javascript"> 28 29 //思路: 30 //通过透明度的变化实现效果 31 //1:注意代码a 清除元素class值 32 //2:注意代码b 当前元素添加class值 33 window.onload = function(){ 34 var lis = document.getElementsByTagName("li"); 35 var size = lis.length; 36 for(var i=0;i<size;i++){ 37 38 lis[i].onmouseover = function(){ 39 //a:当空所有列表样式 40 for(p in lis)lis[p].className = ""; 41 //b:当前元素添加current样式 42 this.className = "current"; 43 44 }; 45 46 } 47 }; 48 </script> 49 </body> 50 </html>