工作需要，同事用js寫了一個動態的評分小星星的插件，感覺很有興趣，於是捉摸着，用jQuery寫了一個小插件。
一、主要思路
1 把靜態的，沒有效果的星星模型做出來，用css把樣式調整好。
2 當鼠標放上去，會獲得當前星星的索引index，然後遍歷所有的星星元素，根據索引，比當前index小的星星，全部點亮，並且後面顯示的文字會隨着index變化而變化。
3 當點擊鼠標時，會先將所有的星星熄滅，然後獲得點擊星星的索引index，遍歷星星元素，根據當前索引來點亮星星，並且將（index+1）作爲評分，放到隱藏域中。
4 當移開鼠標時，會先將所有的星星熄滅，然後獲取隱藏域中的值score，如果score=0，所有星星熄滅，如果score有值，說明之前點亮過，那麼根據score-作爲判斷，遍歷所有星星，將索引小於score的星星點亮，並且根據score顯示相應的文字。
頁面代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>星星特效</title>
</head>
<style type="text/css">
.starBox{
border:1px solid;
width:350px;
height:50px;
margin:100px 550px;
}
.lightOff{
background:url('image/star1.jpg') no-repeat;
display:block;
float:left;
width:20px;
height:20px;
margin:2px;
}
.light{
background:url("image/star2.jpg") no-repeat;
display:block;
float:left;
width:20px;
height:20px;
margin:2px;
}
li{
list-style-type:none;
}
.title{
display:block;
float:left;
}
.stars{
display:block;
float:left;
margin-left:10px;
}
.level{
color:#A1A1A1;
margin-left:15px;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/star.js"></script>
<script type="text/javascript">
$(function(){
$("i").star();
});
</script>
<body>
<div class="starBox">
<ul>
<li>
<input type="hidden" value="" />
<span class="title">請打分</span>
<span class="stars">
<i class="lightOff"></i>
<i class="lightOff"></i>
<i class="lightOff"></i>
<i class="lightOff"></i>
<i class="lightOff"></i>
</span>
<span class="level">暫未評分</span>
</li>
</ul>
</div>
</body>
</html>;(function($){
$.fn.extend({
star:function(){
var degree = ['很差','差','一般','好','很好','未評分'];
//放置鼠標
$(this).on("mouseover",function(){
var index=$(this).index();
var list=$(this).parent().find('i');
list.each(function(i){
if(i<=index){
list.eq(i).attr("class","light");
}
});
$(this).parent().next().html(degree[index]);
});
//移開鼠標
$(this).on("mouseout",function(){
var scoreStr=$(this).parent().prevAll('input').val();
var score=parseInt(scoreStr);
var list=$(this).parent().find('i');
//有過評分
if(score>0){
list.each(function(i){
list.eq(i).attr("class","lightOff");
});
list.each(function(i){
if(i<score){
list.eq(i).attr("class","light");
}
});
$(this).parent().next().html(degree[score-1]);
}else{//還沒有評分，回到初始值
list.each(function(i){
list.eq(i).attr("class","lightOff");
});
$(this).parent().next().html(degree[5]);
}
});
//點擊星星
$(this).on("click",function(){
//先全部關閉
var list=$(this).parent().find("i");
list.each(function(i){
list.eq(i).attr("class","lightOff");
});
//再一次點亮
var index=$(this).index();
list.each(function(i){
if(i<=index){
list.eq(i).attr("class","light");
}
});
//將分數放到隱藏域中
var score=$(this).parent().prevAll("input");
score.val(index+1);
});
}
});
})(jQuery);效果如圖：
