用css制作星级投票评分功能(2)
作者:greengnn 来源:蓝色理想 时间:2008-01-08 21:12:00
第一个模型中忽视了半星级的情况和无初始的星级,下来我们就是要解决这个问题。
Step 1. 先看看效果|Check it in action
图1
Step 2: The XHTML
<ul class="star-rating">
<li class="current-rating">Currently 3.5/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>
和第一个模型的结构相似,唯一不同的是:
<li class="current-rating">Currently 3.5/5 Stars.</li>
定义初始值
Step 3: The Star Image
我们制作一个有三个星的图片,第一个星是空值,第二个是要选择的值,第三个是真实的值。
图2
Step 4: The CSS, the Magic
.star-rating li.current-rating{
background: url(star_rating.gif) left bottom;
position: absolute;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
他定义了初始值,为了避免继承容器ul的相对定位,采用position: absolute;每个星的高度为height:30px;别的就是隐藏文本和定义对齐方式。
空值css
.star-rating{
…
background: url(star_rating.gif) top left repeat-x;
}
选择值css
.star-rating li a:hover{
background: url(star_rating.gif) left center;
…
}
初始值当然会随着选择变动,那么怎样实现它的变化呢?
<li class="current-rating" style="width:105px;">Currently 3.5/5 Stars.</li>
看了这段代码相信你就知道是什么原因了!那这个width是怎样计算的呢?
Average Rating|平均值: 3.5
Each Star Width|每个星的宽度: 30px;
Set width to|将宽度设为: 3.5 * 30 = 105px
下面欣赏一下这个新模型吧
* Example 1: 150 x 30 star rating system
* Example 2: 125 x 25 star rating system
* Example 3: 25 x 125 vertical star rating system
标签:评分,星级,css
0
投稿
猜你喜欢
Oracle数据库系统使用经验六则
2010-07-26 13:22:00
SQL Server数据库导入MySQL数据库体验
2009-01-20 16:07:00
让长字符自动换行 比如URL和Email地址等
2008-07-01 14:41:00
DIV+CSS高度自适应网页代码实例
2008-09-20 08:00:00
MySQL Group By用法
2012-01-05 19:05:14
HTML的基本元素
2010-03-16 12:39:00
WEB打印分页类(JS)
2008-01-22 14:02:00
错误的随机数_JavaScript
2009-08-28 12:43:00
Persits AspJpeg 1.8+ 轻松实现透明文字去锯齿水印
2009-03-20 14:03:00
细化解析:SQL Server 2000 的各种版本
2009-02-05 15:41:00
保护SQL服务器的安全 用户识别问题
2008-12-24 15:26:00
如何把Recordset转换成彩色的XML文件?
2009-11-02 20:22:00
网站浏览器兼容的底线
2007-12-22 11:26:00
浏览器中的内存泄露(续)解决方案
2008-05-03 17:14:00
解析:轻松掌握 字符串文字字符集和校对
2008-12-17 17:07:00
OracleEXP和IMP用法和介绍
2010-07-28 13:18:00
用来武装Firefox的24款Web开发插件
2010-02-28 12:40:00
利用xmlhttp和adodb.stream加缓存技术下载远程Web文
2009-04-23 18:33:00
如何跨浏览器使用连续字符的换行
2008-07-06 23:10:00
如何恢复/修复MS SQL数据库的MDF文件
2007-10-30 13:52:00