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

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

先来看看运行效果截图：

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

　　

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
  3. <HTML xmlns="http://www.w3.org/1999/xhtml">
  4. <HEAD>
  5. <TITLE>jquery点评网星星评论</TITLE>
  6. <style>
  7. 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;}
  8. ul,ol,li{list-style:none;}
  9. input,button{margin:0;font-size:12px;vertical-align:middle;}
  10. body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:left; margin:0 auto;}
  11. table{border-collapse:collapse;border-spacing:0;}
  12. b,em,i{ font-style:normal; font-weight:normal;}
  13. h1,h2,h3,h4{ font-size:14px;}
  14. h5{ font-size:12px;}
  15. h6{ font-size:12px;font-style:normal;}
  16. .fl{ float: left; display: inline;}
  17. .box_163css{ width: 480px;margin:20px auto; height: 30px;}
  18. .s_name{ float:left; display: block; width: 60px; padding-top: 4px; text-align: right;}
  19. .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;}
  20. .star_ul li{ float: left; margin-right:1px;width: 25px; height: 25px; }
  21. .star_ul li a{ display: block; height: 25px; position: absolute; left: 0; top: 0; text-indent: -999em;}
  22. .star_ul li .active-star{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat;}
  23. .star_ul li .one-star{width: 25px;background-position:0 -120px; z-index: 50;}
  24. .star_ul li .two-star{width: 51px;background-position:0 -90px;z-index: 40;}
  25. .star_ul li .three-star{width:79px; background-position:0 -60px;z-index: 30;}
  26. .star_ul li .four-star{width:105px; background-position:0 -30px;z-index: 20;}
  27. .star_ul li .five-star{width:129px; margin-right: 0; background-position:0 0;z-index: 10;}
  28. .s_result{ padding: 6px 0 0 5px; }
  29. .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;}
  30. .square_ul li{ float: left; margin-right:1px;width: 29px; height: 20px; }
  31. .square_ul li a{ display: block; height: 20px; position: absolute; left: 0; top: 0; text-indent: -999em;}
  32. .square_ul li .active-square{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat;}
  33. .square_ul li .square-1{width: 29px;background-position:0 -243px; z-index: 50;}
  34. .square_ul li .square-2{width: 58px;background-position:0 -264px;z-index: 40;}
  35. .square_ul li .square-3{width:87px; background-position:0 -285px;z-index: 30;}
  36. .square_ul li .square-4{width:116px; background-position:0 -306px;z-index: 20;}
  37. .square_ul li .square-5{width:145px; margin-right: 0; background-position:0 -327px;z-index: 10;}
  38. .s_result_square{padding: 4px 0 0 9px; }
  39. </style>
  40. <SCRIPT src="jquery-1.6.2.min.js" type=text/javascript></SCRIPT>
  41. </HEAD>
  42. <script type="text/javascript">
  43. $(function(){
  44.  $('.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('请打分')});
  45.  $('.star_ul a').click(function(){
  46.  alert($('.s_result').html());
  47. })
  48. $('.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('请打分')});
  49.  $('.square_ul a').click(function(){
  50.   alert($(this).parents('.box_163css').find('.s_result_square').html());
  51.  })
  52. })
  53. </script>
  54. <BODY>
  55. <div class="box_163css">
  56.  <span class="s_name">总体评价：</span>
  57.  <ul class="star_ul fl">
  58.   <li><a class="one-star" title="很差" href="#"></a></li>
  59.   <li><a class="two-star" title="差" href="#"></a></li>
  60.   <li><a class="three-star" title="还行" href="#"></a></li>
  61.   <li><a class="four-star" title="好" href="#"></a></li>
  62.   <li><a class="five-star" title="很好" href="#"></a></li>
  63.  </ul>
  64.  <span class="s_result fl">请打分</span>
  65. </div>
  66. <div class="box_163css">
  67.  <span class="s_name">口味：</span>
  68.  <ul class="square_ul fl">
  69.   <li><a class="square-1" title="差" href="#"></a></li>
  70.   <li><a class="square-2" title="一般" href="#"></a></li>
  71.   <li><a class="square-3" title="好" href="#"></a></li>
  72.   <li><a class="square-4" title="很好" href="#"></a></li>
  73.   <li><a class="square-5" title="非常好" href="#"></a></li>
  74.  </ul>
  75.  <span class="s_result_square fl">请打分</span>
  76. </div>
  77. <div class="box_163css">
  78.  <span class="s_name">环境：</span>
  79.  <ul class="square_ul fl">
  80.   <li><a class="square-1" title="差" href="#"></a></li>
  81.   <li><a class="square-2" title="一般" href="#"></a></li>
  82.   <li><a class="square-3" title="好" href="#"></a></li>
  83.   <li><a class="square-4" title="很好" href="#"></a></li>
  84.   <li><a class="square-5" title="非常好" href="#"></a></li>
  85.  </ul>
  86.  <span class="s_result_square fl">请打分</span>
  87. </div>
  88. <div style="text-align:center;clear:both">
  89. </div>
  90. </BODY>
  91. </HTML>

　　

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

  1. 案例(JQuery的ajax无刷新评论)

    CommentsTest.html代码: <head> <meta http-equiv="Content-Type" content="text/ht ...

  2. 详细解读Jquery各Ajax函数

    $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...

  3. 基于jQuery的ajax对WebApi和OData的封装

    基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...

  4. 源码来袭！！！基于jquery的ajax分页插件（demo+源码）

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  5. Sping MVC不使用任何注解处理（jQuery）Ajax请求（基于XML配置）

    1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...

  6. 基于jQuery的AJAX和JSON的实例

    通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板:            ...

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

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  8. Asp.Net下，基于Jquery的Ajax二级联动

    最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...

  9. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

随机推荐

  1. c++11之右值引用

    本文大部分来自这里,并不是完全着行翻译,如有不明白的地方请参考原文. 在c++中,创建临时对象的开销对程序的影响一直很大,比如以下这个例子: String getName(){ return “Kia ...

  2. 关于C++string的长度陷阱

    std::string s = ...; ..... assert(s.length() == strlen(s.c_str())); 一般认为这段代码是不会断言失败的,但是实际上这段代码可能是会断言 ...

  3. photoshop如何把阴影分离开（让阴影单独成为一个图层）

    作图的时候经常会用到,给图片加个投影,但有时还满足不了自己的需要,于是可以把投影分离开来单独操作投影. 图层->图层样式->创建图层 有时还需要滤镜->模糊 一下 哈哈,下次忘了来翻 ...

  4. <linux下sysctl指令详解>

    Sysctl指令是对系统核心参数的设置: 用法: -a 参数列出系统中所有核心设置 当然了这些核心的设置都是文件,存放于/proc/sys/net目录下. 举个有代表性的例子: net.ipv4.ic ...

  5. 浅析 GRUB 如何加载 linux kernel

    前言 对于 GRUB 的加载流程,网上绝大部分都是写对 menu.lst, grub.cfg 这些 GRUB 配置文件的编写流程,就像是写脚本语言一样,用些关键字就能让 PC机能正确启动桌面 Linu ...

  6. IDEA笔记

    快捷键: 查找类:ctrl + shif + R (eclipse)查找文件:double shift查找文件中的变量名和方法:ctrl + H (eclipse)system.out:输入 sout ...

  7. robots.txt用法

    主要作用是告诉蜘蛛爬虫该网站下哪些内容能抓取,哪些内容不能抓取.虽然可以没有robots.txt这个文件,默认就抓取该网站的所有文件,对搜索引擎爬虫没有任何的影响,但是如果你想控制蜘蛛的检索间隔,你就 ...

  8. Delphi 二次开发 CorelDRAW

    我们首先通过一个简单的程序例子来看一下Delphi对CorelDRAW二次开发有什么样的效果.本程序实现CorelDRAW程序的打开和关闭. 1.1 Delphi与CorelDRAW连接 在程序与Co ...

  9. AIX性能监控topas命令的详细解析

    执行topas命令后如图所示: #topas 区域1:反映CPU使用率和工作状况  Kernel:操作系统的内核占用的CPU时间比率. 操作系统作为基础软件,为应用程序支持和服务的同时,本身的运行也需 ...

  10. 在Java中执行js代码

    在某些特定场景下,我们需要用Java来执行Js代码(如模拟登录时,密码被JS加密了的情况),操作如下: ScriptEngineManager mgr = new ScriptEngineManage ...