您的位置：首页 > 其它

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

2017-07-28 14:03 267 查看

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>★</li>
3        <li>★</li>
4        <li>★</li>
5        <li>★</li>
6        <li>★</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.总结
是不是超级简单，你也可以试试哦！

　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航