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>

 

posted @ 2014-06-24 19:52  海泉  阅读(862)  评论(0)  编辑  收藏  举报