首页 > 代码库 > javascript实现五角星效果
javascript实现五角星效果
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JQuery Adventures</title><style>*{ padding:0; margin:0;}li { list-style:none;}#ul1 { width:150px; height:30px; margin:20px auto;}#ul1 li { width:15px; height:30px; float:left; background:url(star.png);}</style><script>window.onload=function(){ var oUl=document.getElementById(‘ul1‘); var aLi=oUl.children; for(var i=0; i<aLi.length;i++){ aLi[i].style.backgroundPosition=i%2?‘-15px 0‘:‘0 0‘; aLi[i].index=i; aLi[i].onmouseover=function(){ for(var i=0; i<aLi.length;i++){ aLi[i].style.backgroundImage=‘‘; } for(var i=0; i<this.index+1;i++){ aLi[i].style.backgroundImage=‘url(redStar.png)‘; } }; aLi[i].onclick=function(){ alert(‘评分‘+(this.index+1)+‘分‘); }; }};</script></head><body><ul id="ul1"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
<li></li>
<li></li> <li></li> <li></li></ul></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。