<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>星级评分</title>
<style type="text/css">
body ul li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.rating{
width: 130px;
height: 26px;
margin: 100px auto;
}
.rating-item{
float: left;
width: 26px;
height: 26px;
cursor: pointer;
background:url(rating.jpg) no-repeat;
}
</style>
</head>
<body background="#ccc">
<ul id="rating" class="rating">
<li class="rating-item" title="很不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="好"></li>
<li class="rating-item" title="很好"></li>
</ul>
<ul id="rating2" class="rating">
<li class="rating-item" title="很不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="好"></li>
<li class="rating-item" title="很好"></li>
</ul>
<script src="jquery.js"></script>
<script>
// rating是一个对象
var rating = (function(){
// 点亮
var lightOn = function($item,num){
$item.each(function(index){
if(index<num){
$(this).css('background-position','0 -26px');
}else{
$(this).css('background-position','0 0');
}
});
}
var init= function(el,num){
var $rating = $(el),
$item=$rating.find('.rating-item');
// 初始化
lightOn($item,num);
// 事件绑定
$rating.on('mouseover','.rating-item',function(){
lightOn($item,$(this).index()+1);
}).on('click','.rating-item',function(){
num = $(this).index()+1;
}).on('mouseout',function(){
lightOn($item,num);
});
};
// Jquery 插件
$.fn.extend({
rating:function(num){
return this.each(function(){
init(this,num);
});
}
});
// 返回一个对象
return {
init:init
};
})();
rating.init('#rating',2);
// rating.init('#rating2',3);
$("#rating2").rating(4);
</script>
</body>
</html>
效果图如下:
rating.jpg图: