jQuery基於ajax實現帶動畫效果無刷新柱狀圖投票代碼

首頁

web前端

js教程

jQuery基於ajax實現帶動畫效果無刷新柱狀圖投票代碼_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:46 PM

ajax jquery 動畫效果投票無重新整理長條圖

本文實例講述了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://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程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7530

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

WPS文檔長條圖怎麼做 Mar 20, 2024 pm 10:11 PM

WPS作為我們日常工作中常用的軟體，在做統計的時候會用到一些圖表來進行比較與參考，例如對長條圖的應用。那你知道WPS長條圖怎麼做嗎？下面小編就來介紹一下WPS長條圖怎麼做的方法。我們開啟使用的WPS軟體後，介面會因WPS版本不同而有所差異，但不會影響操作。接著，在主選單列中找到「插入」選項，開啟後會看到圖表選項。圖表打開以後，第一個就是所謂的長條圖，其實長條圖也分為3種，分別為簇狀長條圖，與堆積長條圖和百分比堆積長條圖，我們需要那個可以自己來選擇，我先介紹一下這個簇狀長條圖的使用。選擇好了

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

如何使用Ajax從PHP方法取得變數？ Mar 09, 2024 pm 05:36 PM

使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：

PHP 與 Ajax：建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

PHP 與 Ajax：建立動態載入內容的解決方案 Jun 06, 2024 pm 01:12 PM

Ajax（非同步JavaScript和XML）允許在不重新載入頁面情況下新增動態內容。使用PHP和Ajax，您可以動態載入產品清單：HTML建立一個帶有容器元素的頁面，Ajax請求載入資料後將資料加入到該元素中。 JavaScript使用Ajax透過XMLHttpRequest向伺服器傳送請求，從伺服器取得JSON格式的產品資料。 PHP使用MySQL從資料庫查詢產品數據，並將其編碼為JSON格式。 JavaScript解析JSON數據，並將其顯示在頁面容器中。點選按鈕觸發Ajax請求，載入產品清單。

如何判斷jQuery元素是否具有特定屬性？ Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性？在使用jQuery操作DOM元素時，常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下，我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性，並附上具體的程式碼範例。方法一：使用attr()方法和typeof運算子//判斷元素是否具有特定屬

See all articles

jQuery基於ajax實現帶動畫效果無刷新柱狀圖投票代碼_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題