<html>
<title>JQuery星星评级 http://meego123.net/</title>
<head>
<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var ltupper=["一","二","三","四","五"];
$(document).ready(function(){
$('.star_rating li a').each(function(){
$(this).click(function(){
var lt=getStars($(this).attr('class'));//通过类名判断星星数
$('#stars').val(lt);
$('#selectStars').text(ltupper[lt-1]+'星');
$('.star_rating li a').slice(0,lt).css({'background':'url(images/yellow.jpg)'});
$('.star_rating li a').slice(lt,5).css({'background':'url(images/while.jpg)'});
})
})
$('.star_rating li a').hover(function(){
var lt=getStars($(this).attr('class'));
$('.star_rating li a').slice(0,lt).css({'background':'url(images/yellow.jpg)'});
$('.star_rating li a').slice(lt,5).css({'background':'url(images/while.jpg)'});
$('#selectStars').text(ltupper[lt-1]+'星');
},function(){
var lt=Number($('#stars').val());
if(lt==""){
$('#selectStars').text('(最高为5星)');
}else{
$('#selectStars').text(ltupper[lt-1]+'星');
}
$('.star_rating li a').slice(0,lt).css({'background':'url(images/yellow.jpg)'});
$('.star_rating li a').slice(lt,5).css({'background':'url(images/while.jpg)'});
})
})
//通过类名判断星星数
function getStars(stars){
var re=1;
switch(stars){
case 'one_star':re=1;break;
case 'two_stars':re=2;break;
case 'three_stars':re=3;break;
case 'four_stars':re=4;break;
case 'five_stars':re=5;break;
}
return re;
}
</script>
<style type="text/css">
<!--
.star_rating {float:left;display:block;list-style:none;margin:-1px 0 0 -1px; padding:0; width:80px; height:16px; position:relative; background:url(images/white.jpg) 0 0 repeat-x; overflow:hidden;font-size:0;}
.star_rating li{padding:0;margin:0;float:left;}
.star_rating li a{display:block;width:16px;height:16px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}
.star_rating li a:hover{background:url(images/yellow.jpg) 0 16px;z-index:2;left:0;}
.star_rating a.one_star{left:0;}
.star_rating a.one_star:hover{width:16px;}
.star_rating a.two_stars{left:16px;}
.star_rating a.two_stars:hover{width:32px;}
.star_rating a.three_stars{left:32px;}
.star_rating a.three_stars:hover{width:48px;}
.star_rating a.four_stars{left:48px;}
.star_rating a.four_stars:hover{width:64px;}
.star_rating a.five_stars{left:64px;}
.star_rating a.five_stars:hover{width:80px;}
-->
</style>
</head>
<body>
<div style="display:block;float:left;width:100px;"><span>*</span> 总体评价:</div>
<ul class="star_rating">
<li><a href="javascript:void(0)" title="1 of 5 stars" class="one_star">1</a></li>
<li><a href="javascript:void(0)" title="2 of 5 stars" class="two_stars">2</a></li>
<li><a href="javascript:void(0)" title="3 of 5 stars" class="three_stars">3</a></li>
<li><a href="javascript:void(0)" title="4 of 5 stars" class="four_stars">4</a></li>
<li><a href="javascript:void(0)" title="5 of 5 stars" class="five_stars">5</a></li>
<li style="display:none;">
<input type="hidden" id="stars" value="" />
</li>
</ul>
<span id="selectStars" style="padding-left:10px;">(最高为5星)</span>
</div>
</body>
</html>