利用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>
效果如下：
js css 星级评分
原文地址：http://www.cnblogs.com/tonnytong/p/7851575.html