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>
jQuery基于ajax实现星星评论代码的更多相关文章
- 案例(JQuery的ajax无刷新评论)
CommentsTest.html代码: <head> <meta http-equiv="Content-Type" content="text/ht ...
- 详细解读Jquery各Ajax函数
$.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...
- 基于jQuery的ajax对WebApi和OData的封装
基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...
- 源码来袭！！！基于jquery的ajax分页插件（demo+源码）
前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...
- Sping MVC不使用任何注解处理（jQuery）Ajax请求（基于XML配置）
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
- 基于jQuery的AJAX和JSON的实例
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: ...
- 基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
- Asp.Net下，基于Jquery的Ajax二级联动
最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...
- 基于jQuery扁平多颜色选项卡切换代码
基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
随机推荐
- Windows Management Instrumentation 服务无法启动 解决办法
Win7下 Windows Management Instrumentation 服务无法启动 解决办法: 1. 以管理员身份运行cmd.exe 2. sc config Winmgmt depend ...
- Linux密码更改
男孩儿的灰色 QQ:936779899 2014.2.9 1. 进入单用户模式 2. 编辑passwd文件,删除X 3. 然后保存推出并编辑shadow文件 4. 删除标色部分,其他保持不变 5. 最 ...
- C# DateTime 日期加1天 减一天 加一月 减一月 等方法(转)
//今天 DateTime.Now.Date.ToShortDateString(); //昨天,就是今天的日期减一 DateTime.Now.AddDays(-).ToShortDateString ...
- UI1_UIView层操作
// // ViewController.m // UI1_UIView层操作 // // Created by zhangxueming on 15/7/1. // Copyright (c) 20 ...
- 前台JSP页面独立化
一直从事Java WEB开发的过程中,当然要常常写JSP文件. 本人对JSP文件有些自己的想法. 页面要尽可能的简单,整洁,条理. js文件要尽可能地放到独立的js文件中,然后引用到当前的JSP文件中 ...
- 洛谷 P1886 滑动窗口
题目描述 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The array i ...
- berkerly db 中简单的读写操作（有一些C的 还有一些C++的）
最近在倒腾BDB,才发现自己确实在C++这一块能力很弱,看了一天的api文档,总算是把BDB的一些api之间的关系理清了,希望初学者要理清数据库基本知识中的环境,句柄,游标的基本概念,这样有助于你更好 ...
- mac实现jni的demo
今天在看ArrayList 源码时看到了System.arraycopy 这个方法,但是这个方法没有java实现. 后面一通查询查找,才知道 如下图 native是一个java调用c语言来实现的操作的 ...
- ADO.NET基本操作（CRUD、Procedure、Transaction）
模型沿用上篇博客所提到的学生.教师.课程,以详细的代码进行演示. 增删改查 添加学生.教师.课程 using System.Data.SqlClient; namespace Test { class ...
- HTML5特性：使用async属性异步加载执行JavaScript
HTML5让我兴奋的一个最大的原因是,它里面实现的新功能和新特征都是我们长久以来一直期待的.比如,我以前一直在使用placeholders,但以前必须要用JavaScript实现.而HTML5里给Ja ...