CSS实例教程:CSS制作星级评价的功能


做一个星级评价的功能不是很难,但是要单纯用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><href='#' title='一星' class='one-star'>1</a></li>
  
<li><href='#' title='二星' class='two-stars'>2</a></li>
  
<li><href='#' title='三星' class='three-stars'>3</a></li>
  
<li><href='#' title='四星' class='four-stars'>4</a></li>
  
<li><href='#' title='五星' class='five-stars'>5</a></li>
</ul>

看看上面CSS的行号您是不是吓了一跳,这么简单的效果竟然用了这么多代码?在我看来不用JS就只能一个效果一个样式了,如果您还有更简单更炫的效果请指教!

示例代码下载

原文地址:http://www.cnblogs.com/gudao119/archive/2010/01/13/1646428.html



相关阅读:
一个用js实现的页内搜索代码
丰富段落里的标签
js:日期正则表达式及检测
Span元素的width属性无效果原因及解决方案
纯真IP数据库的应用 IP地址转化成十进制
提示IFCONFIG命令不存在解决办法
Web Slices是什么
AJAX中DOM的操作方法
php _autoload自动加载类与机制分析
区别div和span、relative和absolute、display和visibility
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
使用PHPRPC实现Ajax安全登录
Win格式文件转Linux格式几招
CSS实现中英文双语导航菜单
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4