javascript星级评论打分组件

很多网站都有类似的效果,实现原理也很简单.

html

<span class="p_rate" id="p_rate">
	<i title="1分"></i>
	<i title="2分"></i>
	<i title="3分"></i>
	<i title="4分"></i>
	<i title="5分"></i>
</span>

css

.p_rate{height:14px;position:relative;width:80px;overflow:hidden;display:inline-block;background:url(http://www.nolure.com/wp-content/uploads/2011/12/rate.png) repeat-x}
.p_rate i{position:absolute;top:0;left:0;cursor:pointer;height:14px;width:16px;background:url(http://www.nolure.com/wp-content/uploads/2011/12/rate.png) repeat-x 0 -500px}
.p_rate .select{background-position:0 -32px}
.p_rate .hover{background-position:0 -16px}

 

javascript

/*
 * 通用打分组件
 * callBack打分后执行的回调
 * this.Index:获取当前选中值
 */
var pRate = function(box,callBack){
	this.Index = null;
	var B = $("#"+box),
		rate = B.children("i"),
		w = rate.width(),
		n = rate.length,
		me = this;
	for(var i=0;i<n;i++){
		rate.eq(i).css({
			'width':w*(i+1),
			'z-index':n-i
		});
	}
	rate.hover(function(){
		var S = B.children("i.select");
		$(this).addClass("hover").siblings().removeClass("hover");
		if($(this).index()>S.index()){
			S.addClass("hover");
		}
	},function(){
		rate.removeClass("hover");
	})
	rate.click(function(){
		rate.removeClass("select hover");
		$(this).addClass("select");
		me.Index = $(this).index() + 1;
		if(callBack){callBack();}
	})
}

DEMO:http://www.nolure.com/p/demo/jquery-rate.html