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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
javascript cookies操作集合
2010/04/12 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python求列表交集的方法汇总
2014/11/10 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python虚拟环境项目实例
2017/11/20 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
创建Django项目图文实例详解
2019/06/06 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
超市端午节活动方案
2014/01/23 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
保护校园环境倡议书
2015/04/28 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书