jquery animate圖片模向滑動示例

vinchen

jquery animate() 用于創(chuàng)建自定義動畫的函數(shù)。這個(gè)函數(shù)的關(guān)鍵在于指定動畫形式及結(jié)果樣式屬性對象。這個(gè)對象中每個(gè)屬性都表示一個(gè)可以變化的樣式屬性（如"height"、"top"或"opacity"）。 注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left. 而每個(gè)屬性的值表示這個(gè)樣式屬性到多少時(shí)動畫結(jié)束。如果是一個(gè)數(shù)值，樣式屬性就會從當(dāng)前的值漸變到指定的值。如果使用的是"hide"、"show"或"toggle"這樣的字符串值，則會為該屬性調(diào)用默認(rèn)的動畫形式。

　　函數(shù)聲明如下：

1. animate(params[, duration[, easing[, callback]]])

復(fù)制代碼

在 jQuery 中，你可以使用 em 和 % 單位。另外，你可以通過在屬性值前面指定 "+=" 或 "-=" 來讓元素做相對運(yùn)動。

　　下面演示一個(gè)圖片列表左右滑動的示例，主要代碼如下：

1. <script type="text/javascript">
   
2. $(function() {
   
3.   $li1 = $(".apply_nav .apply_array");
   
4.   $window1 = $(".apply .apply_w");
   
5.   $left1 = $(".apply .img_l");
   
6.   $right1 = $(".apply .img_r");
   
7.        
   
8.   $window1.css("width", $li1.length*166);
   
9.        
   
10.   var lc1 = 0;
    
11.   var rc1 = $li1.length-5;
    
12.   $left1.click(function() {
    
13.     if (lc1 < 1) {
    
14.      alert("已經(jīng)是第一張圖片");
    
15.      return;
    
16.     }
    
17.     lc1--;
    
18.     rc1++;
    
19.     $window1.animate({left:'+=166px'}, 1000);
    
20.   });
    
21.        
    
22.   $right1.click(function() {
    
23.   if (rc1 < 1) {
    
24.     alert("已經(jīng)是最后一張圖片");
    
25.     return;
    
26.   }
    
27.   lc1++;
    
28.   rc1--;
    
29.   $window1.animate({left:'-=166px'}, 1000);
    
30.   });
    
31. })
    
32. </script>

復(fù)制代碼

運(yùn)行結(jié)果如圖所示：




　　完整實(shí)例代碼下載：http://www.xuekaifa.com/article/20110124/000415.html

　　代碼演示： imgs.rar (70.2 KB, 下載次數(shù): 29)

2011-01-24 10:41 上傳

點(diǎn)擊文件名下載附件
jquery animate圖片模向滑動示例