开发学院WEB开发ASP 纯CSS星级评价 阅读

纯CSS星级评价

 2010-01-14 10:44:50 来源:WEB开发网   
核心提示:做一个星级评价的功能不是很难,但是要单纯用CSS写估计就有点难度了,纯CSS星级评价,先来个截图:效果很简单,可能现在您现在脑子里已经有实现的思路了,下面先看一下我们通常情况下的实现方法:CSS:代码 .jsstar{ list-style: none;margin: 0px;padding: 0px;width: 1
做一个星级评价的功能不是很难,但是要单纯用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:

<p>javascript + CSS实现</p>
<ul class="jsstar">
  <li title="一星"></li>
  <li title="二星"></li>
  <li title="三星"></li>
  <li title="四星"></li>
  <li title="五星"></li>
</ul>
JS:(我用的是jquery)

<script type="text/Javascript" src="jquery-1.3.1.js"></script>

  <script type="text/javascript">
  $(document).ready(function(){
    $(".jsstar >li").hover(
      function(){$(this).css({"background-position":"left bottom"}).PRev().trigger("mouSEOver")},
      function(){$(this).css({"background-position":"left top"}).prev().trigger("mouseout")})
    .click(function(){alert($(this).attr("title"))});   
  });
  </script>
这里是效果图:



是不是和上面的没什么区别,可是又一想如果用户禁掉了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.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       
75     }


HTML:



<ul class='star-rating'>
 <li><a href='#' title='一星' class='one-star'>1</a></li>
 <li><a href='#' title='二星' class='two-stars'>2</a></li>
 <li><a href='#' title='三星' class='three-stars'>3</a></li>
 <li><a href='#' title='四星' class='four-stars'>4</a></li>
 <li><a href='#' title='五星' class='five-stars'>5</a></li>
</ul>
看看上面CSS的行号您是不是吓了一跳,这么简单的效果竟然用了这么多代码?在我看来不用JS就只能一个效果一个样式了,如果您还有更简单更炫的效果请指教!

Tags:CSS 星级 评价

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接