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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
兼容ie和firefox js关闭代码
Dec 11 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 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
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
解决python "No module named pip" 的问题
2018/10/13 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
Python函数式编程实例详解
2020/01/17 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
尼克松手表官网:Nixon手表
2019/03/17 全球购物
市三好学生主要事迹
2014/01/28 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
中职生求职信
2014/07/01 职场文书
购房委托书范本
2014/09/18 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
电影雨中的树观后感
2015/06/15 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers
Flink 侧流输出源码示例解析
2022/09/23 Servers