寫入圖像動畫（交換圖片）與jQuery

我試圖任意動畫使用jQuery和計時器（http://jquery.offput.ca/every/作品定時器）圖像，以便模擬一個GIF動畫，但允許動畫到HTML文件中被定義（或者在頁面頂部的腳本中重複使用相同的「動畫」圖像）。寫入圖像動畫（交換圖片）與jQuery

我已經寫了一個特定的版本，其中的幀是固定的：下面的代碼將交換圖像與一類「動畫」與/path/to/image/dir/frame1.png和/路徑/到/ image/dir/frame2.png每300毫秒。

<script type="text/javascript" src="jquery.timers.js"></script> 
<script type="text/javascript"> 
    ;(function($){ 
     $(function() { 
      var base_path = "/path/to/image/dir/"; 
      var on = true; 
      $(".animate").everyTime(200, function(i) { 
       if(!on) { 
        $(this).attr({src: base_path + "frame1.png"}); 
       } else { 
        $(this).attr({src: base_path + "frame2.png"}); 
       } 
        on = !on; 
       }); 
      }); 
     })(jQuery); 
</script>

我希望做的是上面寫，在圖像標籤，我可以把下面的

<img src="/path/to/fallback/image.png" class="animate {interval:300, src:[frame1.png,frame2.png]}" alt="animated image" />

和的一般形式的腳本可以使用傳入的參數class屬性來確定每個幀和源圖像的持續時間。最初，我只想在兩張圖像之間交替，但理想情況下，我希望讓src數組包含無限循環（即不需要用戶交互）的任意數量的圖像。

任何想法如何我會實現這個？我猜測我需要某種形式的類屬性的鍵值解析，這可能在語義上不正確，那麼是否有另一個（有效但很少使用的）屬性可以用來存儲動畫屬性？

來源

2010-09-20 Robbie

它看起來像什麼你基本上試圖做的是創建一個新的jQuery插件。

爲了存儲動畫的元數據中，jQuery metadata plugin已經做你想要什麼，它支持無級存儲位置。

這裏有一個plugin design pattern包括集成元數據插件的說明。

我的建議是返工的事情，這樣，與示例類的屬性，您可以爲當前頁面所有情況下的動畫用一個簡單的$('img.animate').myAnimationPlugin();（當然，具有更加鮮明的名字）

來源

2010-09-20 06:32:46 ssokolow

謝謝，這是我一直在尋找。數據集插件允許我使用對這類腳本更有用的html5數據屬性 – Robbie 2010-09-22 03:50:12

爲什麼不使用一些圖像滑塊插件是這樣的：http://nivo.dev7studios.com/

您可以將圖像切換動畫設置爲淡入淡出。

來源

2010-09-20 14:01:45

寫入圖像動畫（交換圖片）與jQuery

回答

相關問題