jquery制作精美的评分插件

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

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

以下是 jquery制作精美的评分插件的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<title>jquery�������������ֲ��</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
	<h1><small>jquery�������������ֲ��</small></h1>
	<div id="content">
	 

		<ul id="rating">
			<li><a href="#">This is just a piece of crap</a></li>
			<li><a href="#">Nothing too new or interesting</a></li>
			<li><a href="#">Not bad, I like it</a></li>
			<li><a href="#">I would like to see more of this</a></li>
			<li><a href="#">This is the best thing I've seen</a></li>
		</ul>
		
	</div>
</div>
</body>
</html>

JS代码(script.js):

/** Author:Marco Kuiper (http://www.marcofolio.net/)*/
$(document).ready(function(){
	// Variable to set the duration of the animationvar animationTime = 500;
	// Variable to store the coloursvar colours = ["bd2c33","e49420","ecdb00","3bad54","1b7db9"];
	// Add rating information box after ratingvar ratingInfobox = $("<div />").attr("id","ratinginfo").insertAfter($("#rating"));
	// Function to colorize the right ratingsvar colourizeRatings = function(nrOfRatings){
	$("#rating li a").each(function(){
	if($(this).parent().index() <= nrOfRatings){
	$(this).stop().animate({
	backgroundColor:"#" + colours[nrOfRatings]}
,animationTime);
}
}
);
}
;
	// Handle the hover events$("#rating li a").hover(function(){
	// Empty the rating info box and fade inratingInfobox.empty().stop().animate({
	opacity:1}
,animationTime);
	// Add the text to the rating info box$("<p />").html($(this).html()).appendTo(ratingInfobox);
	// Call the colourize function with the given indexcolourizeRatings($(this).parent().index());
}
,function(){
	// Fade out the rating information boxratingInfobox.stop().animate({
	opacity:0}
,animationTime);
	// Restore all the rating to their original colours$("#rating li a").stop().animate({
	backgroundColor:"#333"}
,animationTime);
}
);
	// Prevent the click event and show the rating$("#rating li a").click(function(e){
	e.preventDefault();
	alert("You voted on item number " + ($(this).parent().index() + 1));
}
);
}
);

CSS代码(style.css):

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding:0;}
/* HTML ELEMENTS */
body{background-image:url("../images/bg.jpg");font-family:Georgia,Times,Serif;;}
a{outline:none;}
h1{font:bold 65px/60px Helvetica,Arial,Sans-serif;text-align:center;color:#eee;text-shadow:0px 2px 6px #333;}
h1 small{font-size:20px;text-transform:uppercase;letter-spacing:14px;display:block;color:#ccc;}
h2 a{display:block;text-decoration:none;margin:0 0 30px 0;font:italic 45px Georgia,Times,Serif;text-align:center;color:#bfe1f1;text-shadow:0px 2px 6px #333;}
h2 a:hover{color:#90bcd0;}
/* COMMON CLASSES */
.break{clear:both;}
/* WRAPPER */
#wrapper{width:800px;margin:40px auto;}
/* CONTENT */
#content{}
.info{padding:10px 20px;font-size:16px;color:#eee;}
.info a{color:#eee;}
/* RATING */
#rating{list-style:none;width:460px;margin:20px auto;}
#rating li{display:inline;float:left;}
#rating li a{display:block;width:80px;height:80px;margin:5px;border:1px solid #888;background-color:#333;text-indent:-9999px;-moz-box-shadow:0 0 5px #888;-moz-border-radius:40px;-webkit-box-shadow:0 0 5px #888;-webkit-border-radius:40px;-o-box-shadow:0 0 5px #888;-o-border-radius:40px;}
#ratinginfo{clear:left;width:350px;margin:120px auto;}
#ratinginfo p{text-align:center;background-image:url("../images/textbg.png");font:20px Georgia,'Times New Roman',serif;padding:10px;-moz-box-shadow:0 0 5px #888;-moz-border-radius:40px;-webkit-box-shadow:0 0 5px #888;-webkit-border-radius:40px;-o-box-shadow:0 0 5px #888;-o-border-radius:40px;}

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