jQuery基于创建交互式、快速动态网页应用的网页开发技术实现带动画效果无刷新柱状图投票代码

本文实例讲述了jQuery基于创建交互式、快速动态网页应用的网页开发技术实现带动画效果无刷新柱状图投票代码。分享给大家供大家参考。具体如下：

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

运行效果截图如下：

具体代码如下：

！DOCTYPE HTMl HTMl head title jquery Ajax投票特效，带动画效果柱状图/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(“# container div a”)).单击(function() { $(this)).父项()。动画({ width: '=100px' }，500)；$(这个)。prev().html(parseInt($(this)).prev().html())1)；返回false })；});/script style type=' text/CSS ' * { font-family : Arial，' Free Sans '；} #容器{ margin-top : 20px；color: # fff} #容器#问题{ display : block padd : 20pxfont-weight :粗体；字母间距：-3px；边距-底部： 20pxpadd : 10px font-size : 40px；} # container div { font-weight : bold；字母间距：-3px；背景技术# 0099cc边距-底部： 15pxpadd : 10px font-size : 34px；color: # ffffff边框-左侧： 20px实心# 333;宽度： 400像素；-web套件-边框-半径：0.5 em；-moz-border-radius : 0 0.5 em 0.5 em 0；边界半径： 0 1.5 em 1.5 em 0} # container div a { border-radius : 0.3 em；文本装饰：无；color : # 0099 ccpadd : 5px 15px背景技术： # 333;margin: 0 20px} #容器div a : hover { color : # fff } # main { background : # 0099 cc边距-top : 0；padding: 2px 0 4px 0文本对齐：中心；} # main a { color: # ffffff文本装饰：无；font-size : 12px字体粗细：粗体；font-family : Arial} # main a :悬停{ text-装饰：下划线；}正文{边距： ^ 0；padd : 0；背景： # ffffff URL('//文件。JB 51。net/file _ images/article/201508/2015810110844109。gif ')重复右上方；} # text { margin: 0 auto宽度： 500像素；font-size : 12pxcolor : # 0099 cc font-weight :粗体；文本对齐：中心；边距-top : 20px；}/style meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/head body div id=' container ' span id=' question '你最喜欢的编程语言是哪一种？/span divspan0/spana href=' '投票/aPHP/div divspan0/spana href=' '投票/aRuby/div divspan0/spana href=' '投票/aJava/div divspan0/spana href=' '投票/aASP/div divspan0/spana href=' '投票/APell/div span 0/spana href=' '投票/aColdFusion/div /div/body/html希望本文所述对大家的jquery程序设计有所帮助。