css 實現評分效果

　　css實現評分效果，其實是css sprites （css精靈）的延伸應用，效果的實現主要是由  background-position 屬性移動圖片位置。之前看到有前輩寫過關於這方面的內容，在理解上稍有偏差。

　　我的理解：有人認為background-position  的位置移動中，這個屬性相當於大圖片不動，把div的頂點進行移動，移動到目標小圖的頂點位置，

可參見：http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html        ，我個人認為應該是div位置不變，變得是圖片的位置，通過background-position將所需要的小圖標定位到div的 0 ，0 位置從而完成小圖標顯示。並且，移動中  background-position  的值是要變為負值的，說明圖片是向上移動的。

單圖標定位 在上邊的博客寫的很詳細，所以直接寫  五星評分效果實現：

 為了更好弄明白，把圖加工了一下：

第一步：

養成良好編程習慣將每部分功能放進一個獨立部分進行封裝，所以在此直接 設置一個div元素:

<div class="rating">

</div>

 

第二步：

由於五星評分需要五個不帶邊框的方塊，很自然要想將五個方塊統一起來使用 ul 和 li標簽最好，由於實現點擊效果，承載元素為 a 標簽：

<div class="rating">
    <ul>
        <li class="one">   <a href="#">1</a></li>
        <li class="two">   <a href="#">2</a></li>
        <li class="three"> <a href="#">3</a></li>
        <li class="four">  <a href="#">4</a></li>
        <li class="five">  <a href="#">5</a></li>
    </ul>
</div>

第三步：

結構搭好后開始進行 css 的設計：

 

ul.rating {
    position: relative;
    list-style: none;
    background: url("../images/star-matrix.gif") no-repeat 0 0;
    width: 80px;
    height: 16px;
}
ul.rating li {
    float: left;
    text-indent: -9999px;
    cursor: pointer;
}
ul.rating li a {
    text-decoration: none;
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0; z-index: 10;/* 與  hover  中的z-index 對比實現另一重要效果，見下邊說明  初步設計時可不考慮*/
}

/*僅僅是將 A 標簽的區域定位至該出現的 UL 區域之中*/
ul.rating li.one a {top: 0;  left: 0;}
ul.rating li.two a {top:0px;  left: 16px;}
ul.rating li.three a {top:0px;  left: 32px;}
ul.rating li.four a {top:0px;  left: 48px;}
ul.rating li.five a {top: 0px;  left: 64px;}

第四步：通過以上代碼基本上完成了初步效果，接下來是鼠標划過小星星時的效果：

思想是，在鼠標放在當前 A 標簽時，A 標簽的區域 變得 和 UL 區域一樣大，通過background-position 屬性定位到所對應的效果圖片，並將其蓋在之前空白星星上。


ul.rating li a:hover{
    width: 80px;
    height: 16px;
    overflow: hidden;
    left: 0;
    top: 0;
    background: url("../images/star-matrix.gif") no-repeat 0 0;
    z-index: 2;  /*  要實現 遮蓋之前背景圖像 功能使用 z-index 使當前對應圖像圖層浮於原圖層之上 */
}

ul.rating li.one a:hover{
    background-position: 0 -96px;
}
ul.rating li.two a:hover{
    background-position: 0 -112px;
}
ul.rating li.three a:hover{
    background-position: 0 -128px;
}
ul.rating li.four a:hover{
    background-position: 0 -144px;
}
ul.rating li.five a:hover{
    background-position: 0 -160px;
}

第五步：至此已完成五分好評的效果（第三步沒用 z-index 屬性 ，加粗部分），但是當鼠標滑過時發現只能選擇一次得分，不能向后或向前，原因是 LI 中的所有 A 都被蓋在最下層，所以在第三步用 z-index 屬性 ，使 A 標簽時刻處以最上層，才能響應 鼠標指針浮動在元素上出現相應的效果。