想控制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
想控制GIF图片动画播放吗?试试gifffer.js的更多相关文章
- Android学习笔记进阶十一图片动画播放(AnimationDrawable)
大家平时见到的最多的可能就是Frame动画了,Android中当然也少不了它.它的使用更加简单,只需要创建一个 AnimationDrawabledF对象来表示Frame动画,然后通过addFrame ...
- 使用canvas控制gif图片的播放与暂停
if ('getContext' in document.createElement('canvas')) { HTMLImageElement.prototype.play = function() ...
- (转)在Unity3D中控制动画播放
用Unity3D也算是好久了,但是每次做项目总还是能学到新的东西.这次做一个TPS的项目就遇到了这样一个问题,如何同时在上下半身播放不同的动画?解决方法其实是很简单,但由于对于动画资源的了解不足导致问 ...
- Cocos2dx 小技巧(十二) 一种可行的系列动画播放方式
今早发生了一件事让我感觉特气愤!去年的这个时候,我和小伙伴们一起在操场上拍毕业照,之后有个当地报纸的记者来我们学校取材,看到我们后打算给我们拍几张创意张扬点的毕业照.之后呢,照片出来了,拍的效果大伙都 ...
- unity3d之控制人物转向移动并播放动画
tip:transition 勾选Has Exit Time B动画播放完毕后就可以自己返回A不用代码控制.因为想做一个小人静止时 隔两秒会摆动小手的特效. 附上代码参考: using UnityEn ...
- JS可控制的图片自动循环播放查看效果
JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...
- Unity NGUI实现序列帧动画播放
如题,要实现序列帧的播放导入图片的时候需要注意: (1)图片的命名要连续,如图: (2)将这些图片在NGUI中打包成Altas图集的时候图片应该在同一个Altas中: 这里以播放特效为例,满足条件时播 ...
- 关于Unity中如何判断一个动画播放结束
方法一(强力推荐): 在动画结束帧或其他帧处加个动画事件,在播放到这一帧的时候会自动调用这个动画函数 如图,找到对应动画的inspector面板,在里面有个Events下拉条,下拉后在想要的帧的位置添 ...
- 【转】unity Animator 怎么判断一个动画播放结束
关于unity Animator 怎么判断一个动画播放结束这里有几种方法.希望对大家有帮助.还有其他办法的可以分享一下 第一种方法:在动画结束帧后面加个动画事件,调用下含这个变量的函数接口不是可以了? ...
随机推荐
- FastReport.Net使用:[37]报表继承
1.设计一个基础报表,将其保存为BaseReport. 2.新建一个继承的报表. 通过 文件-->新建 打开“新建对象”向导.选择“继承的报表”,点击确定. 3. 在打开对话框中选择基础报表Ba ...
- 「SCOI2015」情报传递
「SCOI2015」情报传递 题目描述 奈特公司是一个巨大的情报公司,它有着庞大的情报网络.情报网络中共有 \(n\) 名情报员.每名情报员可能有若干名(可能没有)下线,除 \(1\) 名大头目外其余 ...
- ElasticSearch学习笔记--2、ES相关配置
1.配置文件 ES的配置文件位置:config/elasticsearch.yml可以直接搜索elasticsearch.yml 2.配置远程api访问 network.host: 192.168.1 ...
- vagrant 常用命令以及常用操作
列出这些命令,主要是防止脑内存不足.目前这些命令是我常用的,以后其他命令用的多,我再继续添加... 分享些本人用的百度网盘box,国外的太坑... 本人分享的百度网盘:http://pan.baidu ...
- java爬虫爬取资源,小白必须会的入门代码块
java作为目前最火的语言之一,他的实用性也在被无数的java语言爱好者逐渐的开发,目前比较流行的爬取资源,用java来做也更简单一些,下面是爬取网页上所有手机型号,参数等极为简便的数据 packag ...
- bzoj 2434 ac自动机
ac自动机中,如果以trie中的节点为节点,(fail[i],i)为边,可以建立一颗树,该树有如下特点:“节点u是节点v的祖先 当且仅当 u代表的字符串是v代表的字符串的一个后缀”.(u代表的字符串是 ...
- bzoj 2565: 最长双回文串 manacher算法
2565: 最长双回文串 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/problem. ...
- Codeforces Round #304 (Div. 2) C. Soldier and Cards 水题
C. Soldier and Cards Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/546 ...
- activemq消息重发机制[转]
大家知道,JMS规范中,Message消息头接口中有setJMSRedelivered(boolean redelivered)和getJMSRedelivered()方法,用于设置和获取消息的重发标 ...
- 无法读取Excel中的数据单元格。有数据,但是读出来全是空值
C#读取Excel,取值为空的解决办法! C#读取Excel遇到无法读取的解决方法是什么呢?这样在C#读取Excel的过程中有很多问题,那么本文就向你介绍如何解决C#读取Excel遇到无法读取的解决方 ...