想控制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,如下:
- <scripttype="text/javascript"src="gifffer.min.js"></script>
在HTML中使用如下代碼來引用GIF圖片:
- <imgdata-gifffer="gbtags.gif"/>
注意替換src屬性為data-gifffer來實現控制
最后一步,添加處理的javascript,如下:
- window.onload =function(){
- Gifffer();
- }
搞定了,是不是非常簡單。
實現原理
其實大家研究一下代碼,會發現,這個實現的方式,是把圖片用DIV替換并且添加一個運行按鈕,并且使用HTML畫布來生成一個背景視屏截圖
兼容性:Chrome, FF, Safari, Opera, IE9+
閱讀原文:想控制GIF圖片動畫播放嗎?試試gifffer.js
本文由用戶 jjfat 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!