想控制GIF图片动画播放吗?试试gifffer.js
2014-07-24 19:45
417 查看
在线演示: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
相关文章推荐
- 可控制GIF动画图片播放和暂停jQuery插件
- gifplayer-可控制GIF动画图片播放和暂停jQuery插件
- js控制gif从第一帧开始播放的办法
- js多张图片做成gif动画
- 易语言设置在图片框中播放GIF动画的方法
- CSS或JS实现gif动态图片的停止与播放
- js延迟控制图片动画显示
- wxwidgets中分解GIF动画图片并显示播放
- GTK显示GIF、GTK动画(图片连续播放)
- Delphi 自带GIF控件的动画图片加载和播放
- 《iOS开发之美》节选: 如何在iOS中播放gif 动画图片?
- js中控制图片的循环播放
- JS 控制图片在浏览器上幻灯片式自动播放
- iPhone上用OpenGL实现gif图片动画播放的代码
- CSS或JS实现gif动态图片的停止与播放
- Fresco的简单使用与控制GIF图片播放与停止
- 实现android gif图片动画播放功能
- Android 显示和控制gif动态图片的播放
- WPF:暂时解决播放gif动画图片问题
- Delphi 自带GIF控件的动画图片加载和播放