<!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>
javascript实现五角星效果
时间： 2024-11-05 14:44:12