以下是 jquery制作精美的评分插件 的示例演示效果:
部分效果截图:
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;}
分享到QQ
分享到微博
微信扫一扫
