关于绘制星级评价方法

首先看下效果：

    用函数：

写法：

 1 <script type="text/javascript">
 2                var a = function(number){   //传入星级参数
 3                  var html="";   //定义显示内容
 4                    for(var i = 0;i < number; i++){   //循环加载黄星星 
 5                  html += "<img src="+'images/star0.png'+">";                                                               
 6                        }
 7                    for(var j = 0;j < 5-number;j++){          //循环加载白色星星  
 8                      html += "<img src="+'images/star1.png'+">";
 9                        }
10                    document.getElementById("courseEst").innerHTML = html;  //然后通过ID来选择这个要显示的位置
11                    }
12     </script>

然后在html中的body中调用就行（<body onload="a(4)">）

这是用函数的方法来显示星级（用图片）

当然还有几种方法，如纯css或者是CSS+js。

纯css（不用图片）:

 1 /*CSS Star start*/ 
 2 .star-rating 
 3 { 
 4 list-style: none; 
 5 margin: 0px; 
 6 padding: 0px; 
 7 width: 100px; 
 8 height: 20px; 
 9 position: relative; 
10 background: url(star_rating.gif) top left repeat-x; 
11 } 
12 .star-rating
13 { 
14 padding: 0px; 
15 margin: 0px; 
16 float: left; 
17 } 
18 .star-rating  a 
19 { 
20 display: block; 
21 width: 20px; 
22 height: 20px; 
23 text-decoration: none; 
24 text-indent: -9000px; 
25 z-index: 20; 
26 position: absolute; 
27 padding: 0px; 
28 } 
29 .star-rating  a:hover 
30 { 
31 background: url(star_rating.gif) left bottom; 
32 z-index: 1; 
33 left: 0px; 
34 } 
35 .star-rating a.one-star 
36 { 
37 left: 0px; 
38 } 
39 .star-rating a.one-star:hover 
40 { 
41 width: 20px; 
42 } 
43 .star-rating a.two-stars 
44 { 
45 left: 20px; 
46 } 
47 .star-rating a.two-stars:hover 
48 { 
49 width: 40px; 
50 } 
51 .star-rating a.three-stars:hover 
52 { 
53 width: 60px; 
54 } 
55 .star-rating a.three-stars 
56 { 
57 left: 40px; 
58 } 
59 .star-rating a.four-stars 
60 { 
61 left: 60px; 
62 } 
63 .star-rating a.four-stars:hover 
64 { 
65 width: 80px; 
66 } 
67 .star-rating a.five-stars 
68 { 
69 left: 80px; 
70 } 
71 .star-rating a.five-stars:hover 
72 { 
73 width: 100px; 
74 }

当然还要加上HTML：

1 <div class='star-rating'> 
2 <div><a href='#' title='一星' class='one-star'>1</a></div> 
3 <div><a href='#' title='二星' class='two-stars'>2</a></div> 
4 <div><a href='#' title='三星' class='three-stars'>3</a></div> 
5 <div><a href='#' title='四星' class='four-stars'>4</a></div> 
6 <div><a href='#' title='五星' class='five-stars'>5</a></div> 
7 </div>

用js和CSS一起实现就不做说明了   这个比纯CSS简单多了   你们可以试试   不会的可以@我

posted @ 2013-09-09 22:23  西科程序  阅读(195)  评论(0)  编辑  收藏  举报