Question

求一个滑动鼠标点击星星评分的功能插件，能做出把剩下的积分全部给你

求一个滑动鼠标点击星星评分的功能插件，只要能把评的分写入数据库就行；自由发挥，可以发类似的也可以，这里有一个参考网站；能做成这样最好。 http://www.qkankan.com/asia/japan/composite/200710/60.html

Answer 1

插件 赞助商链接以前写过一篇文章以jquery为基础的星星评分 ，今天有时间把这个功能重写，并以jQuery插件的形式出现以便以后使用。 首先看一下运行效果如下图所示。

附件: star_on.gif

鼠标移到星星上该星星前面的所有星星全部变亮，鼠标单击将记录点击的星星数，前面的所有星星将变亮。

一、原理

本程序的原理是这样的：一个“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了。（文/zhaoyang）

四、代码下载： 星级评分--jQuery插件