jQuery星星评级打分特效

使用方法：

引入CSS样式

/* star */
#star{position: relative; width: 600px; margin: 20px auto; height: 24px;}
#star ul,
#star span{float: left; display: inline; height: 19px; line-height: 19px;}
#star ul{margin: 0 10px;}
#star li{float: left; width: 24px; cursor: pointer; text-indent: -9999px; background: url(images/star.png) no-repeat;}
#star strong{color: #f60; padding-left: 10px;}
#star li.on{background-position: 0 -28px;}

引入jQuery库文件、插件JS文件

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/more-starts.js"></script>

核心JS（注释非常详细）

$(function(){
	var aMsg = [
		"很不满意|差得太离谱，与卖家描述的严重不符，非常不满!",
		"不满意|部分有破损，与卖家描述的不符，不满意!",
		"一般|质量一般，没有卖家描述的那么好!",
		"满意|质量不错，与卖家描述的基本一致，还是挺满意的!",
		"非常满意|质量非常好，与卖家描述的完全一致，非常满意!"
	];
	
	var arrStars = $('.BOX > div');//  几组星星
	
	for(var k = 0; k < $('.BOX > div').length; k++){
		arrStars[k].className = 'star0'+k;
		var star_arrLi = $('.star0'+[k] +'> .star_UL > li');//  几个星星
		var star_strong = $('.star0'+[k] +'> .star_result_span > strong');//星星后面的分数
		var star_a = $('.star0'+[k] +' > .star_result_span a');//星星后面的满意的程度
		
		fun(star_arrLi, star_strong ,star_a);
	}
	
	function fun(arrLi,strong ,strong_a ){
		for (var i =0; i<arrLi.length; i++) {
			arrLi[i].index = i+1;
			arrLi[i].onmouseover = function(){
				//显现值几个星星
				ShowTars(this.index);
				strong.text(this.index + '分');// 星星后面的分数
				strong_a.text(aMsg[this.index - 1].match(/\|(.+)/)[1]);//星星后面的满意的程度
			};
			
			//鼠标离开后恢复到上次显现的几个星星
			arrLi[i].onmouseout = function() {
				var sidNum = $(this).parents('ul').attr('sid');
				
				if(sidNum == 0){
					strong.text("");// 星星后面的分数
					strong_a.text("");//星星后面的满意的程度
				}else{
					strong.text(sidNum + '分');// 星星后面的分数
					strong_a.text(aMsg[sidNum - 1].match(/\|(.+)/)[1]);//星星后面的满意的程度
				}
				ShowTars(sidNum);// 显现值几个星星
			};
			
			//点击后进行评分处理
			arrLi[i].onclick = function() {
				strong.text(this.index + '分');// 星星后面的分数
				strong_a.text(aMsg[this.index - 1].match(/\|(.+)/)[1]);//星星后面的满意的程度
				$(this).parents('ul').attr('sid',this.index);
			};
		}
		
		// 显现值几个星星
		function ShowTars(num) {
			for(var i = 0; i < arrLi.length; i++) 
				arrLi[i].className = i < num ? "on" : "";
		};
	};
});

HTML结构

<div class="BOX">
  <div id="star" class="">
      <span>jQuery星级评分:</span>
      <ul class="star_UL" sid="0">
          <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>
      <span  class="star_result_span">
          <strong></strong>&nbsp;&nbsp;<a></a>
      </span>
  </div>
  
  <div id="star" class="">
      <span>jQuery星级评分:</span>
      <ul class="star_UL" sid="0">
          <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>
      <span  class="star_result_span">
          <strong></strong>&nbsp;&nbsp;<a></a>
      </span>
  </div>
  
  <div id="star" class="">
      <span>jQuery星级评分:</span>
      <ul class="star_UL" sid="0">
          <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>
      <span  class="star_result_span">
          <strong></strong>&nbsp;&nbsp;<a></a>
      </span>
  </div>
  
  <div id="star" class="">
      <span>jQuery星级评分:</span>
      <ul class="star_UL" sid="0">
          <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>
      <span  class="star_result_span">
          <strong></strong>&nbsp;&nbsp;<a></a>
      </span>
  </div>
</div>