评价星星

最新推荐文章于 2024-11-08 16:09:18 发布

yuxiaoyu.

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量111

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/l0520/p/6815130.html

版权

 1 <!DOCTYPE html >
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <script type="text/javascript">
 6     window.onload=function(){
 7         var aUi=document.getElementById('zong');
 8         var aLi=aUi.getElementsByTagName('li');
 9         var aText=document.getElementById('text');
10         var i=0;
11         for(i=0;i<aLi.length;i++){
12         aLi[i].index=i;
13         //当鼠标移到星星上时
14         aLi[i].onmouseover=function(){
15             for(i=0;i<aLi.length;i++){
16                 if(i<=this.index)
17                 {
18                     aLi[i].style.background="url(star.gif) no-repeat 0 -29px";
19                     if(i<=1)
20                         aText.innerHTML="不喜欢";
21                     else if(i>=1&&i<=3)
22                         aText.innerHTML="喜欢";
23                     else if(i>=4)
24                         aText.innerHTML="很喜欢";
25                 }
26                 else
27                 {
28                     aLi[i].style.background="url(star.gif) no-repeat 0 0";
29                 }
30             }
31         };
32         //鼠标移出星星
33         aLi[i].onmouseout=function(){
34             for(i=0;i<aLi.length;i++)
35             {
36                 aLi[i].style.background="url(star.gif) no-repeat 0 0";
37                 aText.innerHTML="";
38             }
39 
40         };
41     }
42     };
43 </script>
44 <style type="text/css">
45     *{margin:0;padding:0;}
46     #zong{width:135px;height:28px;margin:20px auto;}
47     #zong li{width:27px;float:left;height:28px;cursor:pointer;
48              background:url(star.gif) no-repeat 0 0;list-style: none;}
49 </style>
50 </head>
51 <body>
52 <ul id="zong">
53 <li></li>
54 <li></li>
55 <li></li>
56 <li></li>
57 <li></li>
58 <p id="text"></p>
59 </ul>
60 </body>