第一個(gè)模型中忽視了半星級(jí)的情況和無(wú)初始的星級(jí)，下來(lái)我們就是要解決這個(gè)問(wèn)題。

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>

和第一個(gè)模型的結(jié)構(gòu)相似，唯一不同的是:

<li class="current-rating">Currently 3.5/5 Stars.</li>

定義初始值

Step 3: The Star Image

我們制作一個(gè)有三個(gè)星的圖片，第一個(gè)星是空值，第二個(gè)是要選擇的值，第三個(gè)是真實(shí)的值。

圖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的相對(duì)定位，采用position: absolute;每個(gè)星的高度為height:30px;別的就是隱藏文本和定義對(duì)齊方式。

空值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;
    …
    }

初始值當(dāng)然會(huì)隨著選擇變動(dòng)，那么怎樣實(shí)現(xiàn)它的變化呢?

<li class="current-rating" style="width:105px;">Currently 3.5/5 Stars.</li>

看了這段代碼相信你就知道是什么原因了!那這個(gè)width是怎樣計(jì)算的呢?

Average Rating|平均值: 3.5
Each Star Width|每個(gè)星的寬度: 30px;
Set width to|將寬度設(shè)為: 3.5 * 30 = 105px

下面欣賞一下這個(gè)新模型吧
* 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

最新評(píng)論