知向前端
首页
微语
登录
css+jquery打造最简洁的评分效果
2016-7-8 Jon
css+jquery打造最简洁的评分效果
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>最简洁的评分效果</title><br /> <style><br /> body{width: 500px;margin:120px auto;}<br /> .grade-star{position: relative;width: 120px;height: 20px;background: url(https://gitee.com/yinuocode/blogsImg/raw/master/img/star.png) repeat-x 0 0;}<br /> .bright-star{height: 20px;background: url(https://gitee.com/yinuocode/blogsImg/raw/master/img/star.png) repeat-x 0 -25px;<br /> }<br /> .grade-star .star{position: absolute;left:0;width: 24px;height: 20px;}<br /> .grade-star .star1{width: 24px;z-index: 5;}<br /> .grade-star .star2{width: 48px;z-index: 4;}<br /> .grade-star .star3{width: 72px;z-index: 3;}<br /> .grade-star .star4{width: 96px;z-index: 2;}<br /> .grade-star .star5{width: 120px;z-index: 1;}<br /> .grade-star .star:hover,.grade-star .star.active{left:0;background: url(https://gitee.com/yinuocode/blogsImg/raw/master/img/star.png) repeat-x 0 -25px;}<br /> </style><br /> </head><br /> <body><br /> <!-- html --><br /> <h2>展示</h2><br /> <div class="grade-star"><br /> <div class="bright-star" style="width: 49%"><br /> </div><br /> </div><br /> <div class="grade-star"><br /> <div class="bright-star" style="width: 80%"><br /> </div><br /> </div><br /> <h2>评分</h2><br /> <div class="grade-star"><br /> <a href="javascript:;" title="1" class="star star1"></a><br /> <a href="javascript:;" title="2" class="star star2"></a><br /> <a href="javascript:;" title="3" class="star star3"></a><br /> <a href="javascript:;" title="4" class="star star4"></a><br /> <a href="javascript:;" title="5" class="star star5"></a><br /> </div><br /> <!-- js --><br /> <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><br /> <script><br /> $('.grade-star').on('click','.star',function(){$(this).addClass('active').siblings().removeClass('active');});<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看