jQuery循環動畫與取得元件尺寸的方法_jquery

本文實例講述了jQuery循環動畫與取得組件尺寸的方法。分享給大家供大家參考。具體分析如下：

一、前言

1、jQuery中的animate()方法可讓您建立自訂的動畫。

animate() 方法幾乎可以操作所有CSS 屬性，不過當使用animate() 時，必須使用Camel標記法書寫所有的屬性名，例如，必須使用paddingLeft而不是padding-left，使用marginRight而不是margin- right，等等。同時，色彩動畫並不包含在核心 jQuery 函式庫中。如果需要產生顏色動畫，您需要從 jquery.com 下載 Color Animations 外掛程式。

2、透過jQuery，很容易處理元素和瀏覽器視窗的尺寸。
jQuery提供以下屬性取得元素和瀏覽器視窗的尺寸。

二、基本目標

如下圖：

在網頁中建立兩個按鈕，一個按鈕能夠使元件的尺寸在顯示與隱藏狀態中切換，一個按鈕能夠使循環動畫在開始與停止狀態中切換

單純的JQ沒有暫停與開始動畫播放的功能，必須下載jQuery Pause插件完成。這個例子而僅僅透過JavaScript去控制循環動畫，所以每次暫停僅能在其完成一次循環體才能夠打斷，並不能做到在隨意位置暫停開始的功能。

三、製作過程

以下是網頁所有程式碼，之後再一部分一部分解釋：

複製程式碼 程式碼如下:

 
 
     
         
        JQ動畫標題> 
         
         
變數間隔； 
變數我 = 0; 
變數 j = 0; 
函數 divanimate() { 
    $(".d_class").animate( {left : " =100px"}, 500); 
    $(".d_class").animate( {top : " =100px" }, 500); 
    $(".d_class").animate( {left : "-=100px"}, 500); 
    $(".d_class").animate( {top : "-=100px" }, 500); 
} 
函數循環() { 
    divanimate(); 
    間隔 = setInterval("divanimate()", 2000); 
} 
$(文檔).ready(function() { 
    $("#stop").click(function() { 
        我 ; 
        if (i % 2 != 0) 
            循環（）; 
        否則
            清除間隔（間隔）； 
    }); 
    $("#show").click(function() { 
        j ; 
        if (j % 2 != 0) { 
            var txt = ""; 
            txt = "高: " $("#d_id").height() "px"; 
            txt = "寬: " $("#d_id").width() "px"; 
            $("#d_id").html(txt); 
        } 其他 { 
            var txt = ""; 
            $("#d_id").html(txt); 
        } 
    }); 
}) 
    腳本> 
    頭> 
 
     
         
            顯示/隱藏塊尺寸
        按鈕> 
         
            開始/停止動畫的循環
        按鈕> 
       

            樣式=「寬度：100px；高度：100px；背景顏色：#000；位置：絕對；上：50px；顏色：#FFF；左：50px；」>

 
 
    正文> 

1、部分
沒有什麼特別的，就是定義兩個按鈕在與一個圖層。值得注意的是，在圖層的style參數值中必須加入position:absolute一項，否則此圖層無法在網頁中隨意移動

background-color是圖層的背景顏色。 color是圖層中的字型顏色。

要定義id與class兩個參數，因為JQ動畫需要用class來控制，而JQ取得組件尺寸則需要透過id來控制。

同時，擺放圖層的位置需要注意，是用left與top來放置，而不是margin-left與margin-top去放置，因為JQ動畫控制代碼是用left與top去控制的。如果使用margin-left與margin-top去放置在動畫開始的瞬間會有小幅度的失真。

2、部分

也就是核心程式碼部分：

複製程式碼 程式碼如下:

 
     
         
         
         
        <script>  <br /> /*這相當於記錄循環狀態的指針，為下方清除clearInterval()所用*/          <br /> var interval;  <br /> /*i是用來記錄點擊「開始/停止動畫的循環」按鈕的次數，如果此按鈕點擊奇數次就開始循環，偶數次就終止循環*/  <br /> var i = 0;  <br /> /*j是用來記錄點選「顯示/隱藏方塊尺寸」按鈕的次數，若此按鈕點選奇數次就顯示尺寸，偶數次就隱藏尺寸*/  <br /> var j = 0;  <br /> /*由於沒有封裝好的toggle()方法，我們需要這麼做*/  <br /> function divanimate() {  <br />     /*這裡只能透過圖層的class值來控制圖層，取得class值的前面的符號是.，而不是#*/  <br /> <!--要求class為d_class的圖層，先向右偏移100px，再向下偏移100px，之後向左偏移100px，最後向上偏移100px回到原位，每個動作500毫秒以內完成，也就是0.5秒-->  <br /> <!--這裡注意的是left的意義是x軸的正方向，螢幕最左為0px，越往右數值越大，top是y軸的負方向，螢幕最上為0px，越往下數值越大-->  <br />     $(".d_class").animate( {left : " =100px"}, 500);  <br />     $(".d_class").animate( {top : " =100px" }, 500);  <br />     $(".d_class").animate( {left : "-=100px"}, 500);  <br />     $(".d_class").animate( {top : "-=100px" }, 500);  <br /> }  <br /> function cycle() {  <br />     /*此函數是先執行divanimate()函數，之後，每2000毫秒，也就是每2秒執行divanimate()一次。這個間隔剛好是一次動畫所完成時間，如果不打斷此循環的話，剛好能夠無間隔地無縫完美執行循環動畫。 */  <br />     /*第一行必須存在，否則每次點選開始按鈕，都要等2秒，才開始動畫*/  <br />     divanimate();  <br />     interval = setInterval("divanimate()", 2000);  <br /> }  <br /> /*$(document).ready(function(){})意為一載入網頁就載入的函數，所有按鈕的動作類，必須放在其中*/  <br /> $(document).ready(function() {  <br />     $("#stop").click(function() {  <br />         i ;  <br />         if (i % 2 != 0)  <br />             cycle();  <br />         else  <br />         /*終止循環與上面的開始循環是javascript的函數，都說了jquery只是javascript的擴充。 */  <br />             clearInterval(interval);  <br />     });  <br />     $("#show").click(function() {  <br />         j ;  <br />         if (j % 2 != 0) {  <br />             var txt = "";  <br />             txt = "<p align="center">高: " $("#d_id").height() "px";  <br />             txt = "寬: " $("#d_id").width() "px";  <br />             /*此方法能夠在對應的組件標籤中輸出文字*/  <br />             $("#d_id").html(txt);  <br />         } else {  <br />             var txt = "";  <br />             $("#d_id").html(txt);  <br />         }  <br />     });  <br /> })  <br /> </script> 

希望本文所述對大家的jQuery程式設計有所幫助。