jquery鼠标滑动星星打分生活美食网站星级评分



150 596 199



特效描述:鼠标滑动 星星打分 生活美食评分 网站星级评分,jquery鼠标滑动星星打分,制作生活美食网站星级评分,口味、环境数字星级评分。一款非常实用的jQuery星级评分。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* starbox */
.starbox{width:480px;margin:20px auto;height:30px;}
.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>
<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">总体评价:</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">口味:</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">环境:</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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动星星打分 其他 滑动星星打分 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到