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

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

你們可能都斯通見慣了互聯網上廣泛使用的GIF圖片,可是有沒有想過讓用戶本身嘗試控制GIF動畫的播放呢?在今天這篇文章中,咱們將介紹一個超棒的Javascript小類庫 - gifffer.js,它能夠幫助你添加控制GIF動畫功能,想不想嘗試一下?html

如何使用?

首先引用JS,以下:java

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

在HTML中使用以下代碼來引用GIF圖片:jsp

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

注意替換src屬性爲data-gifffer來實現控制動畫

最後一步,添加處理的javascript,以下:spa

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

搞定了,是否是很是簡單。htm

實現原理

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

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

相關文章
相關標籤/搜索