本文主要是介绍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);
})
})
粘贴代码
效果如下：
这篇关于html css星级评分,js css 星级评分(示例代码)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
