js五星好评2

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         ul{
 8             width: 150px;
 9             height: 30px;
10         }
11         li{
12             list-style: none;
13             width: 27px;
14             height: 28px;
15             float: left;
16             background: url(images/star.gif);
17         }
18     </style>
19     <script type="text/javascript">
20         window.onload=function () {
21             var lis= document.getElementsByTagName("li");
22             for (var i = 0; i < lis.length; i++) {
23                 lis[i].currentIndex=i;
24                 lis[i].onmouseover = function (e) {
25                     var event = e || window.event;
26                     var li = event.target|| event.srcElement;
27                     changeColor(li.currentIndex);
28                 };
29             }
30             function changeColor(index) {
31                 for (var j = 0; j < lis.length; j++) {
32                     lis[j].style.background = "url(images/star.gif)";
33                 }
34                 for (var i = 0; i <= index; i++) {
35                     lis[i].style.background = "url(images/star.gif) 0 -29px";
36                 }
37             }
38         }
39     </script>
40 </head>
41 <body>
42 <ul>
43     <li></li>
44     <li></li>
45     <li></li>
46     <li></li>
47     <li></li>
48 </ul>
49 
50 </body>
51 </html>
posted @ 2017-05-10 09:33 火星黑洞阅读(198) 评论(0) 收藏举报
刷新页面返回顶部