html css星级评分,js css 星级评分(示例代码)

利用css 和 js 实现星级评分

rating

*{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;

}

$(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);

})

})

粘贴代码

效果如下：