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

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

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

运行效果截图如下:

具体代码如下:

<!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('http://zsrimg.ikafan.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程序设计有所帮助。

(0)

相关推荐

  • 快速解决FusionCharts联动的中文乱码问题

    问题内容: 使用fusioncharts 时,也许你想在如demo.html 这个页面点击Chart的一个部分,然后显示这个部分的详细内容. fusioncharts有setDataXML,setDataURL 这两个方法是用来设置数据的.但是会有乱码问题(可能出现在AJAX情况),具体使用过的童鞋应该明白. 具体细节不详细说明了. 处理办法. 如果你Ajax请求的返回内容乱码,就直接使用Jquery.ajax. 复制代码 代码如下: function mychartclick(month) {

  • jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】

    本文实例讲述了jQuery插件FusionCharts实现的3D柱状图效果.分享给大家供大家参考,具体如下: 1.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>FusionCharts3D柱状图</title> <script src="js/jquery-1.4.2.min.js"></sc

  • JQUBAR1.1 jQuery 柱状图插件发布

    1.1版本修复了部分bug,同时新增以下功能: 1.可自定义坐标颜色 2.可自定义X,Y轴坐标名称 3.Y轴动态坐标自动建立 4.Y轴动态坐标值自动计算 5.插件样式升级 JQUBAR1.1使用方法: 1.引入Javascript文件及CSS文件: (在html<head></head>加入以下代码,以ASP.NET MVC 2.0 为例) 复制代码 代码如下: <script src="<%=Url.Content("~/Scripts/jquer

  • JQUBar 基于JQUERY的柱状图插件

    一.JQUBAR(V1.0)JQUERY插件简介 1.支持.net.java.php等平台. 2.用户可以通过鼠标拖拽柱状图从而改变每根柱子的高度,最终达到通过鼠标拖拽图形界面来修改服务器数据的目的. 3.支持柱状图缩放. 4.目前支持浏览器:IE7. IE8. Firefox.Chrome. 二.HTML 复制代码 代码如下: <div id="con"><%--JQUBAR容器--%> </div> <input type="ch

  • FusionCharts图表显示双Y轴双(多)曲线

    项目中需要FusionCharts图表显示双Y轴,好像FCF_MSLine.swf不可以这样,只能显示一个Y轴,多条线, 找了一下,用MSCombiDY2D.swf可以实现,生成图如下: 两个图表的数据是一样的,设置有一此不同而己 对应的XML文本如下: 复制代码 代码如下: <chart palette='2' caption='图表' rotateNames='0' showValues='0' divLineDecimalPrecision='1' limitsDecimalPrecisi

  • jqPlot jQuery绘图插件的使用

    jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图.jqPlot支持为图表设置各种不同的样式.提供Tooltips,数据点高亮显示等功能. 官网:http://www.jqplot.com/ 这里贡献上中文教程,基本上所有的api都很齐全,供有需要的童鞋们瞧瞧,更重要的是作为自己滴收藏~~哦耶耶~ jqPlot整的来说有三个地方需要配置.格式如: $.jqplot('target', data, options);target:要显示的位置.data:显示的数据.opti

  • JSP FusionCharts Free显示图表 具体实现

    FusionCharts Free的下载地址:http://www.fusioncharts.com/goodies/fusioncharts-free/ 接下来在jsp页面中引入js 复制代码 代码如下: <script type="text/javascript" src="FusionChartsFree/JSClass/FusionCharts.js"></script> 然后写入 复制代码 代码如下: <script type

  • jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】

    本文实例讲述了jQuery插件FusionCharts实现的2D饼状图效果.分享给大家供大家参考,具体如下: 1.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>FusionCharts2D饼图</title> <script src="js/jquery-1.4.2.min.js"></scr

  • jQuery制作简单柱状图实例

    本文实例讲述了jQuery制作简单柱状图的方法.分享给大家供大家参考.具体实现方法如下: Html部分: 复制代码 代码如下: <head>  <title>柱状图</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <link href="css.css" type="tex

  • 使用jQuery jqPlot插件绘制柱状图

    在一个项目研发过程中,需要显示账户的资金情况,为了给客户良好的体验我们采用了柱状图形展现,绘图的过程如果使用原生态脚本绘制这样比较麻烦,时间也会比较长,所以我们选择了jqPlot插件进行绘制,这样可以节省大量的时间,也能很快就能展示给用户. 插件官方地址:http://www.jqplot.com/ 具体实现如下: 引用JS文件: 复制代码 代码如下: <link href="~/Scripts/asset/jqplot/jquery.jqplot.min.css" rel=&q

  • jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)

    ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示       源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c

  • jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

    本文实例讲述了jQuery插件FusionCharts绘制的3D饼状图效果.分享给大家供大家参考,具体如下: 1.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>最新版FusionCharts3D饼图</title> <script src="js/jquery-1.4.2.min.js"></s

随机推荐