第一個模型中忽視了半星級的情況和無初始的星級，下來我們就是要解決這個問題。

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

初始值當然會隨著選擇變動，那么怎樣實現(xiàn)它的變化呢?

<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

最新評論