js css 点亮星级评分

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

利用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{
width:16px;
height: 16px;
list-style: none;
display: inline-block;
background: url('http://images.cnblogs.com/cnblogs_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/cnblogs_com/tonnytong/769928/o_star.jpg')");
if((index +1) <= num)
{
$this.css("background","url('http://images.cnblogs.com/cnblogs_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>