jQuery基于ajax实现星星评论代码


Posted in Javascript onAugust 07, 2015

本文实例讲述了jQuery基于ajax实现星星评论代码。分享给大家供大家参考。具体如下:

这里使用jquery模仿点评网的星星评论功能,Ajax评论模块,鼠标点击星星即可评价,下边是分数,可以点击后给分,网上很流行的效果,本代码相对完整,相信很多朋友会喜欢的。

先来看看运行效果截图:

jQuery基于ajax实现星星评论代码

具体代码如下:

<!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>
<style>
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(//img.jbzj.com/file_images/article/201508/201587170508564.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(//img.jbzj.com/file_images/article/201508/201587170508564.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(//img.jbzj.com/file_images/article/201508/201587170508564.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(//img.jbzj.com/file_images/article/201508/201587170508564.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 src="jquery-1.6.2.min.js" type=text/javascript></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>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
jquery构造器的实现代码小结
May 16 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 #Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 #Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 #Javascript
css如何让浮动元素水平居中
Aug 07 #Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 #Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 #Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 #Javascript
You might like
生成卡号php代码
2008/04/09 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
简单了解python中对象的取反运算符
2019/07/01 Python
python实现快递价格查询系统
2020/03/03 Python
创立科技Java面试题
2015/11/29 面试题
大学生水果店创业计划书
2014/01/28 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
3的组成教学反思
2014/04/30 职场文书
股指期货心得体会
2014/09/10 职场文书
2014年工程部工作总结
2014/11/25 职场文书
2015年考研复习计划
2015/01/19 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS