鼠標移到星星上該星星前面的所有星星全部變亮，鼠標單擊將記錄點擊的星星數，前面的所有星星將變亮。
一、原理
本程序的原理是這樣的：一個“ul”標簽，該標簽的背景為灰色的星星，控制“ul”標簽的寬度顯示星星的數量。例如：一個星星圖片的寬度為23px，那麼要顯示10個星星，則“ul”的寬度為230px就可以顯示10個星星。
n個“li”標簽，n表示您要顯示星星的個數，例如你要顯示10個星星那麼將有10個“li”標簽。那麼這10個標簽的寬度分別為1個星星的寬度23px，2個星星的寬度46px，......，10個星星的寬度230px。這些“li”標簽的背景將為藍色的星星。
則另外還有一個“li”標簽記錄鼠標單擊的星星或初始設置。
這些標簽都是重疊在一起的，通過鼠標滑動效果切換這些標簽的層疊順序，顯示不同的星星數量，單擊記錄星星個數。
二、源碼
代碼如下:
$.fn.studyplay_star=function(options,callback){
//默認設置
var settings ={
MaxStar :20,
StarWidth :23,
CurrentStar :5,
Enabled :true
};
if(options) { jQuery.extend(settings, options); };
var container = jQuery(this);
container.css({"position":"relative"})
.html('<ul class="studyplay_starBg"></ul>')
.find('.studyplay_starBg').width(settings.MaxStar*settings.StarWidth)
.html('<li class="studyplay_starovering" style="width:'+settings.CurrentStar*settings.StarWidth+'px; z-index:0;" id="studyplay_current"></li>');
if(settings.Enabled)
{
var ListArray = "";
for(k=1;k<settings.MaxStar+1;k++)
{
ListArray +='<li class="studyplay_starON" style="width:'+settings.StarWidth*k+'px;z-index:'+(settings.MaxStar-k+1)+';"></li>';
}
container.find('.studyplay_starBg').append(ListArray)
.find('.studyplay_starON').hover(function(){
$("#studyplay_current").hide();
$(this).removeClass('studyplay_starON').addClass("studyplay_starovering");
},
function(){
$(this).removeClass('studyplay_starovering').addClass("studyplay_starON");
$("#studyplay_current").show();
})
.click(function(){
var studyplay_count = settings.MaxStar - $(this).css("z-index")+1;
$("#studyplay_current").width(studyplay_count*settings.StarWidth)
//回調函數
if (typeof callback == 'function') {
callback(studyplay_count);
return ;
}
})
}
}
這個插件有兩個參數一個是options表示插件的一些基本設置；callback表示回調函數，該函數存在一個參數表示用戶選擇的星星數量。
三、使用
如果我們想在id為“z”的div上顯示5個星星，默認有一顆星星選中，彈出選擇星星的個數對話框，就可以如下編寫代碼：
代碼如下:
<div id="z"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#z").studyplay_star({MaxStar:5,CurrentStar:2},function(value){alert(value)});
});
</script>
如果想顯示評分結果 可以把Enabled設置false就ok了
四、代碼下載
經網友反映說火狐下面存在這問題，今天進行了調試進行了修改 主要是因為樣式中li標簽沒有定義高度引起的，現在已經修正，謝謝朋友們。火狐修正版下載地址：
star2.rar
真心的謝謝網友們
第三次修改：添加0.5分評分功能
使用說明：其中half等於0表示一分一分的增加，1表示0.5的增加
例如：$("#z").studyplay_star({MaxStar:12,CurrentStar:2,Enabled:true,Half:1},function(value){alert(value)});
下載地址：halfstar2.rar