简单实现大方接地气的五角星评分


1.前言 
如何在页面中实现五角星评分呢?鼠标放上去有动态效果并可以点击。来来来,demo走起来! 
2.详情 
1.css样式

.cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;}
 ul li{list-style:none; float:left; font-size:30px; margin:5px; color:#ccc; cursor:pointer;}
.hs,.cs{color:#f00;}

 

2.html内容

1 <ul class="cleanfloat">
2       <li>&#9733;</li>
3        <li>&#9733;</li>
4        <li>&#9733;</li>
5        <li>&#9733;</li>
6        <li>&#9733;</li>
7    </ul>

3.js代码

<script>
    $(function () {
        $("ul li").hover(function(){
            $(this).addClass('hs');
            $(this).prevAll().addClass('hs');
        },function(){
            $(this).removeClass('hs');
            $(this).prevAll().removeClass('hs');
        })

        $("ul li").click(function () {
            $(this).addClass('cs');
            $(this).prevAll().addClass('cs');
            $(this).nextAll().removeClass('cs');
        })
    })
</script>

4.展示效果 

3.总结 
是不是超级简单,你也可以试试哦!

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM