jQuery鼠标星级打分特效js代码

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

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

以下是 jQuery鼠标星级打分特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标星级打分特效</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{ font: 12px/180% Arial, Helvetica, sans-serif, "新宋体"; background-color: #F0F0F0; }
/* starbox */
.starbox{ width: 480px; height: 30px; border: 1px solid #CCC; padding: 20px; margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; background-color: #FFF; }
.fl{float:left;display:inline;}
.s_name{float:left;display:block;width:60px;text-align:right;}
.star_ul{background:url(images/star.png) no-repeat 0 -150px;width:132px;z-index:10;position:relative;height:25px;}
.star_ul li{float:left;margin-right:1px;width:25px;height:25px;}
.star_ul li a{display:block;height:25px;position:absolute;left:0;top:0;text-indent:-999em;}
.star_ul li .active-star{background:url(images/star.png) no-repeat;}
.star_ul li .one-star{width:25px;background-position:0 -120px;z-index:50;}
.star_ul li .two-star{width:51px;background-position:0 -90px;z-index:40;}
.star_ul li .three-star{width:79px;background-position:0 -60px;z-index:30;}
.star_ul li .four-star{width:105px;background-position:0 -30px;z-index:20;}
.star_ul li .five-star{width:129px;margin-right:0;background-position:0 0;z-index:10;}
.s_result{padding:6px 0 0 5px;}

.square_ul{background:url(images/star.png) no-repeat 0 -222px;width:146px;z-index:10;position:relative;height:20px;}
.square_ul li{float:left;margin-right:1px;width:29px;height:20px;}
.square_ul li a{display:block;height:20px;position:absolute;left:0;top:0;text-indent:-999em;}
.square_ul li .active-square{background:url(images/star.png) no-repeat;}
.square_ul li .square-1{width:29px;background-position:0 -243px;z-index:50;}
.square_ul li .square-2{width:58px;background-position:0 -264px;z-index:40;}
.square_ul li .square-3{width:87px;background-position:0 -285px;z-index:30;}
.square_ul li .square-4{width:116px;background-position:0 -306px;z-index:20;}
.square_ul li .square-5{width:145px;margin-right:0;background-position:0 -327px;z-index:10;}
.s_result_square{padding:4px 0 0 9px;}
</style>
</head>

<body>


<script type="text/javascript" src="js/jquery.1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
	
	$('.star_ul a').hover(function(){
		$(this).addClass('active-star');
		$('.s_result').css('color','#c00').html($(this).attr('title'))
	},function(){
		$(this).removeClass('active-star');
		$('.s_result').css('color','#333').html('请打分')
	});
	
	$('.star_ul a').click(function(){
		alert($('.s_result').html());
	});
	
	$('.square_ul a').hover(function(){
		$(this).addClass('active-square');
		$(this).parents('.starbox').find('.s_result_square').css('color','#c00').html($(this).attr('title'))
	},function(){
		$(this).removeClass('active-square');
		$(this).parents('.starbox').find('.s_result_square').css('color','#333').html('请打分')
	});
	
	$('.square_ul a').click(function(){
		alert($(this).parents('.starbox').find('.s_result_square').html());
	});
})
</script>

<div class="starbox">
	<span class="s_name">投票1：</span>
	<ul class="star_ul fl">
		<li><a class="one-star" title="很差" href="#"></a></li>
		<li><a class="two-star" title="差" href="#"></a></li>
		<li><a class="three-star" title="还行" href="#"></a></li>
		<li><a class="four-star" title="好" href="#"></a></li>
		<li><a class="five-star" title="很好" href="#"></a></li>
	</ul>
    <span class="s_result fl">请打分</span>
</div>

<div class="starbox">
	<span class="s_name">投票2：</span>
	<ul class="square_ul fl">
		<li><a class="square-1" title="差" href="#"></a></li>
		<li><a class="square-2" title="一般" href="#"></a></li>
		<li><a class="square-3" title="好" href="#"></a></li>
		<li><a class="square-4" title="很好" href="#"></a></li>
		<li><a class="square-5" title="非常好" href="#"></a></li>
	</ul>
    <span class="s_result_square fl">请打分</span>
</div>

<div class="starbox">
	<span class="s_name">投票3：</span>
	<ul class="square_ul fl">
		<li><a class="square-1" title="差" href="#"></a></li>
		<li><a class="square-2" title="一般" href="#"></a></li>
		<li><a class="square-3" title="好" href="#"></a></li>
		<li><a class="square-4" title="很好" href="#"></a></li>
		<li><a class="square-5" title="非常好" href="#"></a></li>
	</ul>
    <span class="s_result_square fl">请打分</span>
</div>
</body>
</html>

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