交互说明


从上往下四个过程：

1，默认时看到的样子
2，触发选择打分标准，有title提示
3，我选了个2分，并点击打分
4，打分后，平均值和votes值无刷新变化，并且星型icon不能点击也再无title提示

from

表现原理

和动态显示等级选择器一样用的都是position，图片也都是一张，所不同的是有三个icon，并且很好的解决了初始值的问题。


<ul class="star_rating">
  <li class="current_rating" rating: 4.7 (3 votes)</li>
  <li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
  <li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
  <li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
  <li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
  <li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
</ul>
current_rating是初始状态，写在li上的宽度就是计算初始值的依据。
.current_rating{ background:url(11_093621_rating_stars.gif) 0 24px; position:absolute; height:12px; display:block; text-indent:-9000px; z-index:1; left:0;}
demo

如果说“动态显示等级选择器”是一个好创意，那么ColorScheme这个方案可以说是把这个创意发挥到了极致。

Star Rating Part Deux