星星评分效果-2种方法！

好久没写博了，不是因为事情多没时间，也不是因为没什么可写的，只是单纯的因为懒······哎！！

周五下午闲着没事突然想起前两天看到的一个星星评分效果挺有意思的，一个挺传统，一个是较特别。再一次觉得条条大路通罗马啊！

首先方法一：

先看html代码：

<ul>
        <li><a href="javascript:;">1</a></li>
        <li><a href="javascript:;">2</a></li>
        <li><a href="javascript:;">3</a></li>
        <li><a href="javascript:;">4</a></li>
        <li><a href="javascript:;">5</a></li>
</ul>

大体思路：li在没有被选中的时候它的背景全是空心的星星，在被选中的时候就给当前的这个li新增一个类名，这个类名的主要主用就是换背景，把空心的星星换成实心的星星。当鼠标移开后当前的这个类名去掉还原成原来的空心但是它前面的星星还是实心。最后点击的时候判断当前是第几颗星星，然后前面的星星都变成实心，并且在鼠标移开的时候也是实心。

接下来看看核心代码：

<script>
  var b=c=0;
  function fnShow(a){
    c=a||b;
    for(var i=0; i<lis.length; i++){
      lis[i].className=i<c?"on":""  }
}
  for(var i=1; i<=lis.length; i++){
    lis[i-1].index=i;
    lis[i-1].onmouseover=function(){
      fnShow(this.index);
 }
    lis[i-1].onmouseout=function(){
     fnShow(a);
 }
    lis[i-1].onclick=function(){
     b=this.index;
 }
}
</script>

然后方法二（挺有意思的）：

还是先看html代码：

<div id="content">
    <ul class="star" id="star">
      <li><a href="javascript:void(0)" title="1" class="one-star">1</a></li>
      <li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li>
      <li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li>
      <li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li>
      <li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li>
    </ul>
    <div class="current-rating" id="showb"></div>
</div>

然后你就会发现这段html代码和上面的相比就多了一段代码，id为showb的div，对！它就是关键啦，其实它的作用主要是用来显示您当前移到哪颗星星了。

大体思路：它呢主要要和css结合起来，结合的关键部分就是a:hover,您想象这样一个画面，有两个层但它们是重叠在一起的，上面的那个层是5个空心的星星，下面的那个层是5个实心的星星，当你指向当前的那颗星时，它前面的所有星星都变成实心，也包括它。当你移动鼠标时，它前面的星星依旧是实心，后面的则为空心。那么我们可以根据上面层的宽度来决定下面显示的宽度。

看看它的css代码：

<style>
#star{width:120px;position:relative;background:url(star.png) repeat-x;}//empty star
#star li{float;}
#star li a{display:block;width:24px;height:20px;text-indent:-999em;z-index:5;position:absolute;left:0;top:0}
#star li a:hover{background:url(star.png) 0 -25px repeat-x;}//important full empty
#star a.one-star{left:0}
#star a.one-star:hover{width:24px}
#star a.two-stars{left:24px}
#star a.two-stars:hover{width:48px}
#star a.three-stars{left:48px}
#star a.three-stars:hover{width:72px}
#star a.four-stars{left:72px}
#star a.four-stars:hover{width:96px}
#star a.five-stars{left:96px}
#star a.five-stars:hover{width:120px}
.current-rating{position:absolute;height:20px;z-index:1;background:url(star.png) 0 -25px repeat-x;top:0;left:0}
</style>

然后是核心代码：

<script>
window.onload=function(){
var lis = document.getElementsByTagName("li");
var show = document.getElementById("showb");
for(var i=0;i<lis.length;i++){
 lis[i].index=i;
 lis[i].onclick=function(){  
   show.style.width= (this.index+1)*24 +"px";
 }
}
}
</script>

最后写完了，希望能有所帮助！