这篇文章主要介绍了jQuery基于ajax实现带动画效果无刷新柱状图投票代码,通过使用jquery动态操作页面元素样式属性实现柱状图投票效果,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了jQuery基于ajax实现带动画效果无刷新柱状图投票代码。分享给大家供大家参考。具体如下：
这里介绍的jQuery ajax投票特效,带动画效果 类似进度条风格的柱状图，以你最喜欢的编程语言是哪一种为例来演示投票效果，以Ajax方式无刷新投票，每点击一次，横向的柱状图就会增长一节。如果在火狐或chrome下浏览，那些柱状图横条是圆角的，在IE8下则无此效果。
运行效果截图如下：
具体代码如下：
jQuery ajax投票特效,带动画效果 柱状图 * { 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; } 你最喜欢的编程语言是哪一种？0投票PHP0投票Ruby0投票Java0投票ASP0投票Perl0投票ColdFusion
希望本文所述对大家的jquery程序设计有所帮助。
以上就是jQuery基于ajax实现带动画效果无刷新柱状图投票代码的详细内容，更多请关注本站其它相关文章！
