首先看一下运行效果如下图所示。
[img]http://files.jb51.net/upload/201108/20110812112246599.gif[/img]
鼠标移到星星上该星星前面的所有星星全部变亮,鼠标单击将记录点击的星星数,前面的所有星星将变亮。
[b]一、原理
[/b]本程序的原理是这样的:一个“ul”标签,该标签的背景为灰色的星星,控制“ul”标签的宽度显示星星的数量。例如:一个星星图片的宽度为23px,那么要显示10个星星,则“ul”的宽度为230px就可以显示10个星星。
n个“li”标签,n表示您要显示星星的个数,例如你要显示10个星星那么将有10个“li”标签。那么这10个标签的宽度分别为1个星星的宽度23px,2个星星的宽度46px,......,10个星星的宽度230px。这些“li”标签的背景将为蓝色的星星。
则另外还有一个“li”标签记录鼠标单击的星星或初始设置。
这些标签都是重叠在一起的,通过鼠标滑动效果切换这些标签的层叠顺序,显示不同的星星数量,单击记录星星个数。
[b]二、源码[/b]
[url=http://xiazai.jb51.net/201108/yuanma/star2.rar]star2.rar[/url]
真心的谢谢网友们
第三次修改:添加0.5分评分功能
使用说明:其中half等于0表示一分一分的增加,1表示0.5的增加
例如:$("#z").studyplay_star({MaxStar:12,CurrentStar:2,Enabled:true,Half:1},function(value){alert(value)});
下载地址:[url=http://xiazai.jb51.net/201108/yuanma/halfstar2.rar]halfstar2.rar[/url]