简单jquery五角星评分插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是简单jquery五角星评分插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单jQuery五角星评分插件</title>
<script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/star_rating.js"></script>
<style type="text/css">
#rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repeat; border: 1px solid #F9BA0D; width: 140px; height: 23px; text-align: left; margin-left: 6px;}
	#rating_on { background: url(images/rating_onbackground.jpg) top left no-repeat; width: 0px; height: 21px; position: relative; z-index: 50; top: -21px; }
#rated { display: none; width: 138px; padding: 3px 0px 3px 2px; height: 23px; background-color: #1E1D1C; height: 17px;font-size: 11px;color: #FFC910;}
	#rated div { display: block; float: left; }
	#rating { font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFC910; padding-left: 3px; width: 22px; }
	#small_stars { height: 11px; width: 69px; background-image: url(images/stars_small_sprite.jpg); background-position: 0px -11px; font-size:1px; line-height: 11px; margin-top:3px; }
	#rate_edit { line-height: 17px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFF; padding-left: 9px; cursor: pointer; }
	#rate_edit:hover { text-decoration: underline; }

	#rating_btns { position: relative; z-index: 100; width: 140px; height: 21px;}
	#rating_btns ul, #rating_btns li  { padding: 0; margin: 0; }
	#rating_btns li { float: left; width: 14px; height: 21px; display: block; font-size: 1px; cursor: pointer; color: #1E1D1C;
	 }
</style>
</head>
<body>
<div id="demo">
	<div id="rating_cont">		
		<div id="rating_btns">
			<ul>
				<li>0.5</li>
				<li>1.0</li>
				<li>1.5</li>
				<li>2.0</li>
				<li>2.5</li>
				<li>3.0</li>
				<li>3.5</li>
				<li>4.0</li>
				<li>4.5</li>
				<li>5.0</li>
			</ul>
		</div>	
		<div id="rating_on" >&nbsp;</div>
		<div id="rated">
			<div id="rating" style="height: 17px; line-height: 17px;">not rated</div>
			<div> - &nbsp;</div>
			<div id="small_stars">&nbsp;</div>
			<div id="rate_edit">edit</div>
		</div>		
	</div>
	<input type="hidden" id="rating_output" name="rating_output" value="not rated" />
</div><br />
<br />
</body>
</html>

JS代码(star_rating.js):

/** Written by eligeske* downloaded from eligeske.com* have fun. nerd.*/
$(document).ready(function(){
	// hover$('#rating_btns li').hover(function(){
	$rating = $(this).text();
	$('#rating_on').css('width',rateWidth($rating));
}
);
	// mouseout$('#rating_btns li').mouseout(function(){
	$rating = $('#rating').text();
	if($rating == "not rated"){
	$('#rating_on').css('width',"0px");
}
else{
	$('#rating_on').css('width',rateWidth($rating));
}
}
);
	//click$('#rating_btns li').click(function(){
	$rating = $(this).text();
	$('#rating').text($rating);
	$('#rating_output').val($rating);
	$pos = starSprite($rating);
	$('#small_stars').css('background-position',"0px " + $pos );
	$('#rating_btns').hide();
	$('#rating_on').hide();
	$('#rated').fadeIn();
}
);
	//edit$('#rate_edit').click(function(){
	$('#rated').hide();
	$('#rating_btns').fadeIn();
	$('#rating_on').fadeIn();
}
);
	function rateWidth($rating){
	$rating = parseFloat($rating);
	switch ($rating){
	case 0.5:$width = "14px";
	break;
	case 1.0:$width = "28px";
	break;
	case 1.5:$width = "42px";
	break;
	case 2.0:$width = "56px";
	break;
	case 2.5:$width = "70px";
	break;
	case 3.0:$width = "84px";
	break;
	case 3.5:$width = "98px";
	break;
	case 4.0:$width = "112px";
	break;
	case 4.5:$width = "126px";
	break;
	case 5.0:$width = "140px";
	break;
	default:$width = "84px";
}
return $width;
}
function starSprite($rating){
	$rating = parseFloat($rating);
	switch ($rating){
	case 0.5:$pos = "-11px";
	break;
	case 1.0:$pos = "-22px";
	break;
	case 1.5:$pos = "-33px";
	break;
	case 2.0:$pos = "-44px";
	break;
	case 2.5:$pos = "-55px";
	break;
	case 3.0:$pos = "-66px";
	break;
	case 3.5:$pos = "-77px";
	break;
	case 4.0:$pos = "-88px";
	break;
	case 4.5:$pos = "-99px";
	break;
	case 5.0:$pos = "-110px";
	break;
	default:$pos = "-77px";
}
return $pos;
}
}
);

附件:下载该文件资源,减少时间成本(增值服务)