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程序设计有所帮助。