javascript实现五角星效果

最新推荐文章于 2023-03-03 16:00:25 发布

weixin_30580341

最新推荐文章于 2023-03-03 16:00:25 发布

阅读量464

点赞数

原文链接：http://www.cnblogs.com/ygl-web/p/3806769.html

版权


<!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>

转载于:https://www.cnblogs.com/ygl-web/p/3806769.html

weixin_30580341

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript实现五角星效果

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JQuery Adventures</title><style>*{ pa...
复制链接

扫一扫