效果图:
图片:
完整代码:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 星级评分
- </title>
- <style>
- *{ padding:0; margin: 0; } .rating{ width:140px; height: 26px; margin:100px
- auto; } .rating-item{ float:left; width:28px; height: 26px; background:url(img/star.PNG)
- no-repeat ; cursor:pointer; list-style: none; }
- </style>
- </head>
- <body>
- <ul class="rating" id="rating">
- <li class="rating-item" title="很不好">
- </li>
- <li class="rating-item" title="不好">
- </li>
- <li class="rating-item" title="一般">
- </li>
- <li class="rating-item" title="好">
- </li>
- <li class="rating-item" title="很好">
- </li>
- </ul>
- <script src="js/jquery.min.js">
- </script>
- <script>
- let num = 0;
- let $rating = $('#rating');
- let $item = $rating.find('.rating-item');
- let lightOn = function(num) {
- $item.each(function(index) {
- if (index < num) {
- $(this).CSS('background-position', '0 -26px');
- } else {
- $(this).CSS('background-position', '0 0');
- }
- })
- }
- // 初始化
- lightOn(num);
- // 事件绑定
- $rating.on('mouseover', '.rating-item',
- function() { // 事件委托
- lightOn($(this).index() + 1);
- }).on('click', '.rating-item',
- function() {
- num = $(this).index() + 1;
- let info = $(this).attr("title");
- console.log(`您选择了"${info}"`);
- }).on('mouseout',
- function() {
- lightOn(num);
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3282381.html