star.gif

基本思路

工作中增加評星的需求，開始網上沒有找到合適的方法，插件并不實用。星星亮和不亮用css背景圖控制，開始PC端用的onmousemove，鼠標滑動改變分數。移動端不支持onmousemove，移動端改成了onclick。

css樣式：

*{margin:0;padding:0;}
.pingfen{ width:135px;margin:10px auto;height:28px;}
.pingfen li{ width:27px;float:left;height:28px; cursor:pointer;background:url(star.gif) no-repeat 0 0; list-style:none;}

html：

<div id="pingfen" class="pingfen">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

js：

<script>
    window.onload=function(){
        var aLi=document.getElementsByTagName('li');

        for(var i=0; i<aLi.length; i++){
            aLi[i].index=i;
            aLi[i].onclick=function(){
                for(var i=0; i<aLi.length; i++){
                    if(i<=this.index){
                        aLi[i].style.background='url(star.gif) no-repeat 0 -29px';
                    }else{
                        aLi[i].style.background='url(star.gif) no-repeat 0 0px';
                    }
                }
                console.log('你打了'+(this.index+1)+'分')
            };

            
        }
    };
</script>

星星圖片：

star.gif

總結：

歡迎大家和我一起討論，有考慮不到的方面或者，其他技術方面的問題可以留言。