想控制GIF圖片動畫播放嗎？試試gifffer.js

在線演示：http://www.gbtags.com/gb/demoviewer/3578/c6bec39a-61ae-4017-8e23-e0bc1eeb740f/example|index.html.htm

大家可能都斯通見慣了互聯網上普遍使用的GIF圖片，但是有沒有想過讓用戶自己嘗試控制GIF動畫的播放呢？在今天這篇文章中，我們將介紹一個超棒的Javascript小類庫 - gifffer.js，它可以幫助你添加控制GIF動畫功能，想不想嘗試一下？

如何使用？

首先引用JS，如下：

1. <scripttype="text/javascript"src="gifffer.min.js"></script>

在HTML中使用如下代碼來引用GIF圖片：

1. <imgdata-gifffer="gbtags.gif"/>

注意替換src屬性為data-gifffer來實現控制

最后一步，添加處理的javascript，如下：

1. window.onload =function(){
2. Gifffer();
3. }

搞定了，是不是非常簡單。

實現原理

其實大家研究一下代碼，會發現，這個實現的方式，是把圖片用DIV替換並且添加一個運行按鈕，並且使用HTML畫布來生成一個背景視屏截圖

兼容性：Chrome, FF, Safari, Opera, IE9+
閱讀原文：想控制GIF圖片動畫播放嗎？試試gifffer.js