用css实现星级评分效果

  

     以前看到其他网站实现的实现的星级评分效果，没在意那么多，直到昨天做一个页面需要这个功能效果时，发现自己实现起来还是这么困难，折腾了半天才弄出来。

    1. 其实主要是利用背景图片的切换位置来实现星级的效果，

    2.分为三个层面，分别是空分层，分数层和打分层，我是用position：absolute;属性实现三个层面的定位；

    3.利用链接中的a:hover属性设置背景图片来实现打分的效果；

    4.为5个空链接层，定位，设置宽度（主要是控制图片的显示的个数），然后用z-index来定显示的不同顺序，使有的图层不会被遮掩。

    主要实现的代码例子如下：

 css代码：

   <style type="text/css">

*{ margin:0; padding:0;}

.box{ width:400px; margin:10px auto;}

.listBox,.listBox .currentRating,.listBox a:hover,.listBox a:active,.listBox a:focus{ position:relative; background:url(images/star.gif) left top;}

.listBox{ position:relative; height:30px; width:150px; list-style:none; overflow:hidden; }

.listBox li{ display:inline; }

.listBox .currentRating,.listBox a{ position:absolute; left:0; top:0; height:30px; line-height:30px; text-indent:-9999px; display:block;}

.listBox a:hover,.listBox a:active,.listBox a:focus{ background-position: left center;}

.listBox a.one{ width:30px; z-index:5;}

.listBox a.two{ width:60px; z-index:4;}

.listBox a.three{ width:90px; z-index:3;}

.listBox a.four{ width:120px; z-index:2;}

.listBox a.five{ width:150px; z-index:1;}

.listBox .currentRating{ background-position:left bottom; width:50%; z-index:0;}

</style>

  html代码：

  <div class="box">

  <ul class="listBox" >

    <li class="currentRating">current</li>

    <li ><a class="one" href="">1</a></li>

    <li><a  class="two" href="">1</a></li>

    <li ><a class="three" href="">1</a></li>

    <li><a class="four" href="">1</a></li>

    <li ><a class="five" href="">1</a></li>

  </ul>

</div>

效果：



第二种实现的方法。html代码如上：
 css代码：

<style type="text/css">
* {
    margin:0;
    padding:0;
}
.box {
    width:400px;
    margin:10px auto;
}
.listBox, .listBox .currentRating, .listBox a:hover {
    background:url(images/star.gif) left top;
}
.listBox {
    position:relative;
    height:30px;
    width:150px;
    list-style:none;
    overflow:hidden;
}
.listBox li {
    display:inline;
}
.listBox .currentRating {
    position:absolute;
    left:0;
    top:0;
    height:30px;
    line-height:30px;
    text-indent:-9999px;
    display:block;
    overflow:hidden;
    border: none;
}
.listBox li a {
    position:absolute;
    left:0;
    top:0;
    height:30px;
    line-height:30px;
    text-indent:-9999px;
    display:block;
    overflow:hidden;
    border: none;
    width:30px;
    z-index:20;
}
.listBox li a:hover {
    background:url(images/star.gif) left center;
    z-index:2;
    left:0;
}
.listBox a.one {
    left:0
}
.listBox a.one:hover {
    width:30px;
}
.listBox a.two {
    left:30px;
}
.listBox a.two:hover {
    width:60px;
}
.listBox a.three {
    left:60px;
}
.listBox a.three:hover {
    width:90px;
}
.listBox a.four {
    left:90px;
}
.listBox a.four:hover {
    width:120px;
}
.listBox a.five {
    left:120px;
}
.listBox a.five:hover {
    width:150px;
}
.listBox .currentRating {
    background-position:left bottom;
    width:50%;
    z-index:1;
}
</style>