利用css 和 js 实现星级评分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rating</title> </head> <style > *{margin:0;padding: 0} ul{width:500px; padding:100px;padding:0 auto;} li{ margin:10px; width:16px; height: 16px; list-style: none; display: inline-block; background: url(‘http://images.cnblogs.com/com/tonnytong/769928/o_star.jpg‘) no-repeat; } </style> <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> </body> </html> <script type="text/javascript" src="https://files.cnblogs.com/files/tonnytong/___jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function(){ var ratingWrap = $("#rating") , ratingItem = $(".rating-item",ratingWrap) , num = 2; var lightOn = function(num){ ratingItem.each(function(index){ var $this = $(this); $this.css("background","url(‘http://images.cnblogs.com/com/tonnytong/769928/o_star.jpg‘)"); if((index +1) <= num) { $this.css("background","url(‘http://images.cnblogs.com/com/tonnytong/769928/o_on.jpg‘)"); } }) } lightOn(num); $(".rating-item").on("mouseover",function(){ var $this = $(this); lightOn($this.index()+1); }).on("click",function(){ var $this = $(this); num = $this.index()+1; }).on("mouseout",function(){ lightOn(num); }) }) </script>
粘贴代码
效果如下:
时间: 2024-11-08 03:45:36