又一个jQuery无刷新打分评价代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>jquery点评网星星评论 </TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
@charset "utf-8";
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif;  text-align:left; margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
b,em,i{ font-style:normal; font-weight:normal;}
h1,h2,h3,h4{ font-size:14px;}
h5{ font-size:12px;}
h6{ font-size:12px;font-style:normal;}
.fl{ float: left; display: inline;}
.box_163css{ width: 480px;margin:20px auto; height: 30px;}
.s_name{ float:left; display: block; width: 60px; padding-top: 4px; text-align: right;}
.star_ul{background: url(//ku.shouce.ren/files/images/201601/56a3692f598f7.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(//ku.shouce.ren/files/images/201601/56a3692f598f7.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(//ku.shouce.ren/files/images/201601/56a3692f598f7.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(//ku.shouce.ren/files/images/201601/56a3692f598f7.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" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
</HEAD>
<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('.box_163css').find('.s_result_square').css('color','#c00').html($(this).attr('title'))},function(){$(this).removeClass('active-square');$(this).parents('.box_163css').find('.s_result_square').css('color','#333').html('请打分')});
		$('.square_ul a').click(function(){
			alert($(this).parents('.box_163css').find('.s_result_square').html());
		})
	})
</script>
<BODY>
<div class="box_163css">
	<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="box_163css">
	<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="box_163css">
	<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 style="text-align:center;clear:both">
</div>
</BODY>
</HTML>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

又一个jQuery无刷新打分评价代码

分类

jQuery实例

描述

jQuery实现的无刷新评论效果，点击小星星就可评价了，看上去很熟悉的功能，方便嵌入到你的网页中，也可使用最新版本的jquery插件，我觉得相当不错的效果。