AnimateImages jQuery Plugin 把多張圖片一一快速的切換的方式來產生類似 gif 的動畫效果，讓您不用真的產生 gif 就擁有相同的效果囉！
套件名稱：AnimateImages jQuery Plugin
套件網址：N/A
作者網站：http://blog.shynet.nl/post/201......mateImages-jQuery-Plugin.aspx
套件網址：N/A
發佈日期：2010-08-28
檔案大小：1.19 KB
檔案下載：jquery.animateImages.js
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 | path(必填) 描述： 圖片路徑及檔名；檔名要依 fileName-@.png 的規則，@ 會被自動替換成數字 預設值： 無 count(選填) 描述： 圖片數量；用來替換 fileName-@.png 中 @ 的值 預設值： 無 interval(選填) 描述： 圖片動畫切換速度(1000毫秒 = 1秒) 預設值： 無 |
方法說明：
檢視原始碼 JavaScript
1 2 | // 在指定的區塊中切換顯示圖片動畫 $(selector).animateImages(path, count, interval); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.animateImages.js"></script> <script type="text/javascript"> $(function(){ // .circleball 每隔 90 毫秒換一張 images/circleball-1.png ~ images/circleball-8.png 圖片 $('.circleball').animateImages('images/circleball-@.png', 8, 90); // .bar 每隔 90 毫秒換一張 images/bar-1.png ~ images/bar-10.png 圖片 $('.bar').animateImages('images/bar-@.png', 10, 90); }); </script> <body> Animated GIF:<img src="images/circleball.gif" alt="" /> <br /> Animated images: <span class="circleball"></span> <br /> <br /> Animated GIF:<img src="images/bar.gif" alt="" /> <br /> Animated images: <span class="bar"></span> </body> |