本文執行個體講述了jQuery基於ajax實現帶動畫效果無重新整理柱狀圖投票代碼。分享給大家供大家參考。具體如下：
這裡介紹的jQuery ajax投票特效,帶動畫效果 類似進度條風格的柱狀圖，以你最喜歡的程式設計語言是哪一種為例來示範投票效果，以Ajax方式無重新整理投票，每點擊一次，橫向的柱狀圖就會增長一節。如果在Firefox或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://files.jb51.net/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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
