jQuery星級評論打分組件

2024-09-05 12:18:27

字體：大中小

來源：轉載

供稿：網友

jquery星級評論打分組件，通用打分組件，callBack打分后執行的回調，this.Index:獲取當前選中值。。

<!DOCTYPE HTML><html>	<head> <meta charset="utf-8"><title>jquery星級評論打分組件</title> <script src="/ajaxjs/jquery-1.6.2.min.js"></script><script> 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();}	})}</script><style type="text/css"> h1{font:26px/3 'microsoft yahei','simhei';color:#000;text-indent:2em;text-shadow:1px 1px 2px #ccc}	.p_rate{height:14px;position:relative;width:80px;overflow:hidden;display:inline-block;background:url(/jscss/demoimg/201208/rate.png) repeat-x;margin:40px 100px}.p_rate i{position:absolute;top:0;left:0;cursor:pointer;height:14px;width:16px;background:url(/jscss/demoimg/201208/rate.png) repeat-x 0 -500px}.p_rate .select{background-position:0 -32px}.p_rate .hover{background-position:0 -16px}</style></head> <body><h1>jquery星級評論打分組件</h1>	 <span id="iwvjtn8m0"    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><script> var Rate = new pRate("p_rate",function(){alert(Rate.Index+'分')});</script></body> </html>

下一篇：挺個性的jQuery返回底部、返回頂部特效