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

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

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

先来看看运行效果截图:

<li><a href="http://www.100sucai.com/web/wangyezhizuo/fanhuidingbu" title="返回顶部">返回顶部</a></li>
  <li><a href="http://www.100sucai.com/web/wangyezhizuo/tucengdaima" title="图层代码">图层代码</a></li>
  <li><a href="http://www.100sucai.com/web/wangyezhizuo/gundongdaima" title="滚动代码">滚动代码</a></li>
  <li><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian" title="幻灯片">幻灯片</a></li>
  <li><a href="http://www.100sucai.com/web/wangyezhizuo/wenzitexiao" title="文字特效">文字特效</a></li>

  

<!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(http://files.jb51.net/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(http://files.jb51.net/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(http://files.jb51.net/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(http://files.jb51.net/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>

  

时间: 2024-10-29 14:50:12

jQuery基于ajax实现星星评论代码的相关文章

详细解读Jquery各Ajax函数

$.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数. 而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明 $.get("data.php",$("#firstName

解决jquery使用ajax提交button标签时重复提交了。

这几天遇到一个jquery的ajax问题.相关代码是 <form action="xxx" method="post"> <button type="submit" class="tijiao">提交</button> </form> js为 $(".tijiao").click(function(){ $.post(xxx, $('.alert-form')

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

jquery的ajax实现的删除记录代码实例

jquery的ajax实现的删除记录代码实例:下面一段jquery实现的ajax代码实例,能够删除一条记录,并且会给出提示信息,代码如下:代码段一: /* 请求Ajax 带返回值,并弹出提示框提醒---------------------------*/ function getAjax(url,parm,callBack){ $.ajax({ type:'post', dataType:"text", url:url, data:parm, cache:false, async:fa

基于jQuery加载进度条特效代码

基于jQuery加载进度条特效代码是一款简单的加载新数据,获取数据jQuery进度条代码. 在线预览   源码下载 实现的代码. html代码: <div id="main"> <div class="demo"> <div class="bars"> <span id="bar">55</span> </div> <div class="

基于jQuery的ajax系列之用FormData实现页面无刷新上传

接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

基于jQuery网页步骤流程进度条代码

基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="step_context test"></div> 当前步骤:第<input type="text" value="5" id="currentStepVal" />步 <button onclick=&qu

基于jquery地图特效全国网点查看代码

基于jquery地图特效全国网点查看代码.这是一款简单实用的jQuery地图特效,主要知识点是jquery和css实现了中图地图,提示层效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m_map"> <div class="mp mp1"> <div class="feng"> <div class="tree"> <div

基于jQuery实现汉字转换成拼音代码

基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <br /> <br /> <br /> <br /> <br /> <center> 在这里输入汉字<br /> <textarea id="content"> </textarea><br /&g