想控制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

相关文章
相关标签/搜索