Ferris教程学习笔记:js示例2.11 图片列表：鼠标移入/移出改变图片透明度

//思路:
//通过透明度的变化实现效果
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>