快捷導(dǎo)航

jQuery基于ajax實(shí)現(xiàn)帶動畫效果無刷新柱狀圖投票代碼

更新時間：2015年08月10日 11:01:55 作者：企鵝

這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)帶動畫效果無刷新柱狀圖投票代碼,通過使用jquery動態(tài)操作頁面元素樣式屬性實(shí)現(xiàn)柱狀圖投票效果,非常具有實(shí)用價值,需要的朋友可以參考下

本文實(shí)例講述了jQuery基于ajax實(shí)現(xiàn)帶動畫效果無刷新柱狀圖投票代碼。分享給大家供大家參考。具體如下：

這里介紹的jQuery ajax投票特效,帶動畫效果類似進(jìn)度條風(fēng)格的柱狀圖，以你最喜歡的編程語言是哪一種為例來演示投票效果，以Ajax方式無刷新投票，每點(diǎn)擊一次，橫向的柱狀圖就會增長一節(jié)。如果在火狐或chrome下瀏覽，那些柱狀圖橫條是圓角的，在IE8下則無此效果。

運(yùn)行效果截圖如下：

具體代碼如下：

<!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程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: