jQuery基于ajax实现带动画效果无刷新柱状图投票代码


Posted in Javascript onAugust 10, 2015

本文实例讲述了jQuery基于ajax实现带动画效果无刷新柱状图投票代码。分享给大家供大家参考。具体如下:

这里介绍的jQuery ajax投票特效,带动画效果 类似进度条风格的柱状图,以你最喜欢的编程语言是哪一种为例来演示投票效果,以Ajax方式无刷新投票,每点击一次,横向的柱状图就会增长一节。如果在火狐或chrome下浏览,那些柱状图横条是圆角的,在IE8下则无此效果。

运行效果截图如下:

jQuery基于ajax实现带动画效果无刷新柱状图投票代码

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<title>jQuery ajax投票特效,带动画效果 柱状图</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#container div a").click(function() {
  $(this).parent().animate({
   width: '+=100px'
  }, 500);
  $(this).prev().html(parseInt($(this).prev().html()) + 1);
  return false;
 });
});
</script>
<style type="text/css">
* {
 font-family: Arial, "Free Sans";
}
#container {
 margin-top: 20px;
 color: #fff;
}
#container #question {
 display: block;
 padding: 20px;
 font-weight: bold;
 letter-spacing: -3px;
 margin-bottom: 20px;
 padding: 10px;
 font-size: 40px;
}
#container div {
 font-weight: bold;
 letter-spacing: -3px;
 background: #0099cc;
 margin-bottom: 15px;
 padding: 10px;
 font-size: 34px;
 color: #ffffff;
 border-left: 20px solid #333;
 width: 400px;
 -webkit-border-radius: 0.5em;
 -moz-border-radius: 0 0.5em 0.5em 0;
 border-radius: 0 1.5em 1.5em 0;
}
#container div a {
 border-radius: 0.3em;
 text-decoration: none;
 color: #0099cc;
 padding: 5px 15px;
 background: #333;
 margin: 0 20px;
}
#container div a:hover {
 color: #fff;
}
#main {
 background: #0099cc;
 margin-top: 0;
 padding: 2px 0 4px 0;
 text-align: center;
}
#main a {
 color: #ffffff;
 text-decoration: none;
 font-size: 12px;
 font-weight: bold;
 font-family: Arial;
}
#main a:hover {
 text-decoration: underline;
}
body {
 margin: 0;
 padding: 0;
 background: #ffffff url('//img.jbzj.com/file_images/article/201508/2015810110844109.gif') repeat right top;
}
#text {
 margin: 0 auto;
 width: 500px;
 font-size: 12px;
 color: #0099cc;
 font-weight: bold;
 text-align: center;
 margin-top: 20px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
 <div id="container">
  <span id="question">你最喜欢的编程语言是哪一种?</span>
  <div><span>0</span><a href="">投票</a>PHP</div>
  <div><span>0</span><a href="">投票</a>Ruby</div>
  <div><span>0</span><a href="">投票</a>Java</div>
  <div><span>0</span><a href="">投票</a>ASP</div>
  <div><span>0</span><a href="">投票</a>Perl</div>
  <div><span>0</span><a href="">投票</a>ColdFusion</div>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
javascript中caller和callee详解
Aug 10 #Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 #Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 #Javascript
jQuery中$(function() {});问题详解
Aug 10 #Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 #Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 #Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 #Javascript
You might like
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
存储过程和函数的区别
2013/05/28 面试题
巾帼文明岗汇报材料
2014/12/24 职场文书
中秋节慰问信
2015/02/15 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏