T086学习网 | 站长学院 | 技术文档 | 成语 | 歇后语 | 帝国时代 | 代码收藏 | IP地址查询 | 生活百科 | 生日密码 | CSS压缩 | 用户评论 | 欣欣百宝箱

[翻译]用css制作星级评分 II

【 blueidea作者:greengnn 更新时间:2006-03-15 | 字体:
[导读]原文:Creating a Star Rater using CSS 链接:http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/ 版权:版权归原作者所有,翻译文档版权归本人|greengnn,和blueidea。第一个模型...

原文:Creating a Star Rater using CSS
链接:http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
版权:版权归原作者所有,翻译文档版权归本人|greengnn,和blueidea。

第一个模型中忽视了半星级的情况和无初始的星级,下来我们就是要解决这个问题。
现回顾一下第一个模型,文章地址
对这篇文章不理解的建议去看看用CSS制作星级评分I

Step 1. 先看看效果|Check it in action

click for full size
图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

我们制作一个有三个星的图片,第一个星是空值,第二个是要选择的值,第三个是真实的值。

click for full size
图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

1. .star-rating{ 2. … 3. background: url(star_rating.gif) top left repeat-x; 4. }



选择值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
  • 转载请注明来源:IT学习网 网址:http://www.t086.com/ 向您的朋友推荐此文章
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们,我们会尽快予以更正。
更多
留言建议ASP探针PHP探针站长Enjoy的Blog
© 2017 T086学习网 - T086.com(原itlearner.com)
RunTime:7.22ms QueryTime:7