js实现商城星星评分的效果
在这里和朋友们分享一个使用js实现商城星星评分的效果，希望能给大家点帮助，当然更好的特效还有待大家完善。
html如下：
<divclass="starts"> <ulid="pingStar"> <lirel="1"title="特别差，给1分"></li> <lirel="2"title="很差，给2分"></li> <lirel="3"title="一般般，给3分"></li> <lirel="4"title="很好，给4分"></li> <lirel="5"title="非常好，给5分"></li> <spanid="dir"></span> </ul> <inputtype="hidden"value=""id="startP"> </div>
css样式：
.starts,.startsul{float:left;}
.starts{padding-left:16px;padding-top:7px;}
.startsulli{width:32px;height:31px;float:left;background:#ddd;padding-right:3px;}
.startsulli.on{background:red;}
.startsulspan{display:inline;float:left;padding-left:10px;height:31px;line-height:31px;}
最后js调用如下:
window.onload=function(){
vars=document.getElementById("pingStar"),
m=document.getElementById('dir'),
n=s.getElementsByTagName("li"),
input=document.getElementById('startP');//保存所选值
clearAll=function(){
for(vari=0;i<n.length;i++){
n[i].className='';
}
}
for(vari=0;i<n.length;i++){
n[i].onclick=function(){
varq=this.getAttribute("rel");
clearAll();
input.value=q;
for(vari=0;i<q;i++){
n[i].className='on';
}
m.innerHTML=this.getAttribute("title");
}
n[i].onmouseover=function(){
varq=this.getAttribute("rel");
clearAll();
for(vari=0;i<q;i++){
n[i].className='on';
}
}
n[i].onmouseout=function(){
clearAll();
for(vari=0;i<input.value;i++){
n[i].className='on';
}
}
}
}
以上就是本文的全部内容，希望对大家的学习jquery程序设计有所帮助。