(009)迅雷评分 

 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     <link href="迅雷评分.css" rel="stylesheet" type="text/css" />
 7     <script type="text/javascript">
 8 
 9         window.onload = function() {
10 
11             var rankDivNode = document.getElementById("rank");
12             var ulNodeArr = rankDivNode.getElementsByTagName("ul");
13             var liNodeArr = ulNodeArr[0].getElementsByTagName("li");
14             var pNode = rankDivNode.getElementsByTagName("p")[0];
15 
16             var scoreArr = ["一般","给力","很给力","非常给力","力荐"];
17             
18             for(var i = 0; i < liNodeArr.length; i++)
19             {
20                 liNodeArr[i].index = i;
21             }
22 
23             for(var i = 0; i < liNodeArr.length; i++)
24             {
25                 
26                 liNodeArr[i].onmouseover = function() {
27                     //this.className = "active";
28                     for(var i = 0; i <= this.index; i++)
29                     {
30                         liNodeArr[i].className = "active";
31                     }
32                     pNode.style.display = "block";
33                     pNode.innerHTML = scoreArr[this.index];
34                 };
35 
36                 liNodeArr[i].onmouseout = function() {
37                     for(var i = 0; i <= this.index; i++)
38                     {
39                         liNodeArr[i].className = "";
40                     }
41                     pNode.style.display = "none";
42                     pNode.innerHTML = "";
43                 };
44             }
45         };
46 
47     </script>
48 </head>
49 
50 <body>
51 <div id="rank">
52     <ul>
53         <li></li>
54         <li></li>
55         <li></li>
56         <li></li>
57         <li></li>
58     </ul>
59     <p>一般<p>
60 </div>
61 </body>
62 </html>
 1 *{margin:0;padding:0;}
 2 #rank{ width:135px;margin:10px auto;height:28px;}
 3 #rank li{ width:27px;float:left;height:28px; 
 4 
 5 cursor:pointer;background:url(star.gif) no-repeat 0 0; list-
 6 
 7 style:none;}
 8 #rank .active{background:url(star.gif) no-repeat 0 -29px;}
 9 #rank p{width:134x;height:28px;background:white;line-
10 
11 height:28px;text-align:center;font-size:14px;border:1px #ccc 
12 
13 solid;display:block}

 

posted @ 2013-11-28 23:15  雪中飞雁  阅读(70)  评论(0)    收藏  举报