ASP源码
PHP源码
.NET源码
JSP源码
做一个星级评价的功能不是很难,但是要单纯用CSS写估计就有点难度了,先来个截图:
效果很简单,可能现在您现在脑子里已经有实现的思路了。下面先看一下我们通常情况下的实现方法:
CSS:
代码
.jsstar
{ list-style: none;
margin: 0px;
padding: 0px;
width: 100px;
height: 20px;
position: relative;
}
.jsstar li
{
padding:0px;
margin: 0px;
float: left;
width:20px;
height:20px;
background:url(star_rating.gif) 0 0 no-repeat;
}
HTML:
Javascript + CSS实现
这里是效果图:
是不是和上面的没什么区别,可是又一想如果用户禁掉了javascript岂不是效果很惨?
于是我们想到了用纯CSS实现,下面是代码:
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 li
13 {
14 padding: 0px;
15 margin: 0px;
16 float: left;
17 }
18 .star-rating li 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 li a:hover
30 {
31 background: url(star_rating.gif) left bottom;
32 z-index: 1;
33 left: 0px;
34 }
35 .star-rating a.***-star
36 {
37 left: 0px;
38 }
39 .star-rating a.***-star:hover
40 {
41 width: 20px;
42 }
43 .star-rating a.***-stars
44 {
45 left: 20px;
46 }
47 .star-rating a.***-stars:hover
48 {
49 width: 40px;
50 }
51 .star-rating a.***ee-stars:hover
52 {
53 width: 60px;
54 }
55 .star-rating a.***ee-stars
56 {
57 left: 40px;
58 }
59 .star-rating a.***r-stars
60 {
61 left: 60px;
62 }
63 .star-rating a.***r-stars:hover
64 {
65 width: 80px;
66 }
67 .star-rating a.***e-stars
68 {
69 left: 80px;
70 }
71 .star-rating a.***e-stars:hover
72 {
73 width: 100px;
74
75 }
HTML: