css+jquery打造最简洁的评分效果

2016-7-8 Jon html+css

css+jquery打造最简洁的评分效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>最简洁的评分效果</title>
      <style>
        body{width: 500px;margin:120px auto;}
        .grade-star{position: relative;width: 120px;height: 20px;background: url(https://gitee.com/yinuocode/blogsImg/raw/master/img/star.png) repeat-x 0 0;}
        .bright-star{height: 20px;background: url(https://gitee.com/yinuocode/blogsImg/raw/master/img/star.png) repeat-x 0 -25px;
        }
        .grade-star .star{position: absolute;left:0;width: 24px;height: 20px;}
        .grade-star .star1{width: 24px;z-index: 5;}
        .grade-star .star2{width: 48px;z-index: 4;}
        .grade-star .star3{width: 72px;z-index: 3;}
        .grade-star .star4{width: 96px;z-index: 2;}
        .grade-star .star5{width: 120px;z-index: 1;}
        .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;}
      </style>
    </head>
    <body>
      <!-- html -->
      <h2>展示</h2>
      <div class="grade-star">
        <div class="bright-star" style="width: 49%">
        </div>
      </div>
      <div class="grade-star">
        <div class="bright-star" style="width: 80%">
        </div>
      </div>
      <h2>评分</h2>
      <div class="grade-star">
        <a href="javascript:;" title="1" class="star star1"></a>
        <a href="javascript:;" title="2" class="star star2"></a>
        <a href="javascript:;" title="3" class="star star3"></a>
        <a href="javascript:;" title="4" class="star star4"></a>
        <a href="javascript:;" title="5" class="star star5"></a>
      </div>
      <!-- js -->
      <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
      <script>
        $('.grade-star').on('click','.star',function(){$(this).addClass('active').siblings().removeClass('active');});
      </script>
    </body>
    </html>

您可以修改框中代码后运行查看

标签: 评分

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇JS判断客户端是否是iOS或者Android手机移动端
上一篇不教育孩子，总会有人替你狠狠教育他！

发表评论：

知向前端

css+jquery打造最简洁的评分效果

css+jquery打造最简洁的评分效果

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档