仿迅雷看看评分 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评分</title>
    <style type="text/css">
        *{margin:0;padding:0px;}
        ul,li{list-style-type: none;}
        #content{width:405px;height: 81px;margin:10px auto;background: #584646;border:1px solid #C75A5A;padding: 10px;}
        #content ul{width:405px;height: 81px;}
        .active{background: url(bj_xing.png) no-repeat bottom left !important;}
        #content ul li{width:81px;height:81px;float:left;background: url(bj_xing.png) no-repeat top left;}
        #content ul:after{clear: both;}
        p{width:150px;height:30px;margin:0 auto;text-align: center;line-height: 30px;border:1px solid #C75A5A;display: none;}
    </style>
    <script type="text/javascript">
    var aDate=['很差','较差','一般','推荐','力荐'];
    window.onload=function(){
        var oDiv=document.getElementById('content');
        var aLi=oDiv.getElementsByTagName('li');
        var oP=document.getElementsByTagName('p')[0];
        var i=0;

        for(i=0;i<aLi.length;i++){
            aLi[i].index=i;
            aLi[i].onmouseover=function(){
                oP.style.display='block';
                oP.innerHTML=aDate[this.index];
                for(i=0;i<=this.index;i++){
                    aLi[i].className='active';
                }
            }
            aLi[i].onmouseout=function(){
                oP.style.display='none';
                for(i=0;i<aLi.length;i++){
                    aLi[i].className='';
                }
            }
            aLi[i].onclick=function(){
                alert('评分成功,'+(this.index+1)+'分');
            }
        }
    }
    </script>
</head>
<body>
    <div id="content">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <p>一般</p>
</body>
</html>

 

查看范例

posted @ 2017-01-19 11:20  Mr_W_Blog  阅读(230)  评论(0)    收藏  举报