这个是单个评分的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style type="text/css">
*{margin: 0; padding: 0; list-style: none;}
.pingf{}
.pingf ul li{float: left; width: 20px; height: 20px; background: #ccc; margin: 5px;}
</style>
<div id="pingf" class="pingf">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
var num = 2; //开始亮几个
var $light = $('#pingf ul li')
//使之变背景
var lighton = function(num){
$light.each(function(index){
if (index < num) {
$(this).css('background','red')
} else{
$(this).css('background','#ccc')
}
});
}
//调用函数
lighton(num);
//鼠标移出效果
$light.mouseover(function(){
lighton($(this).index()+1);
}).click(function(){
num = $(this).index()+1;
})
$('#pingf').mouseout(function(){
lighton(num);
})
</script>
</body>
</html>
