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

大家可能都斯通见惯了互联网上普遍使用的GIF图片,但是有没有想过让用户自己尝试控制GIF动画的播放呢?在今天这篇文章中,我们将介绍一个超棒的Javascript小类库 - gifffer.js,它可以帮助你添加控制GIF动画功能,想不想尝试一下?

如何使用?

首先引用JS,如下:

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

在HTML中使用如下代码来引用GIF图片:

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

注意替换src属性为data-gifffer来实现控制

最后一步,添加处理的javascript,如下:

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

搞定了,是不是非常简单。

实现原理

其实大家研究一下代码,会发现,这个实现的方式,是把图片用DIV替换并且添加一个运行按钮,并且使用HTML画布来生成一个背景视屏截图

兼容性:Chrome, FF, Safari, Opera, IE9+
阅读原文:想控制GIF图片动画播放吗?试试gifffer.js

想控制GIF图片动画播放吗?试试gifffer.js的更多相关文章

  1. Android学习笔记进阶十一图片动画播放(AnimationDrawable)

    大家平时见到的最多的可能就是Frame动画了,Android中当然也少不了它.它的使用更加简单,只需要创建一个 AnimationDrawabledF对象来表示Frame动画,然后通过addFrame ...

  2. 使用canvas控制gif图片的播放与暂停

    if ('getContext' in document.createElement('canvas')) { HTMLImageElement.prototype.play = function() ...

  3. (转)在Unity3D中控制动画播放

    用Unity3D也算是好久了,但是每次做项目总还是能学到新的东西.这次做一个TPS的项目就遇到了这样一个问题,如何同时在上下半身播放不同的动画?解决方法其实是很简单,但由于对于动画资源的了解不足导致问 ...

  4. Cocos2dx 小技巧(十二) 一种可行的系列动画播放方式

    今早发生了一件事让我感觉特气愤!去年的这个时候,我和小伙伴们一起在操场上拍毕业照,之后有个当地报纸的记者来我们学校取材,看到我们后打算给我们拍几张创意张扬点的毕业照.之后呢,照片出来了,拍的效果大伙都 ...

  5. unity3d之控制人物转向移动并播放动画

    tip:transition 勾选Has Exit Time B动画播放完毕后就可以自己返回A不用代码控制.因为想做一个小人静止时 隔两秒会摆动小手的特效. 附上代码参考: using UnityEn ...

  6. JS可控制的图片自动循环播放查看效果

    JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...

  7. Unity NGUI实现序列帧动画播放

    如题,要实现序列帧的播放导入图片的时候需要注意: (1)图片的命名要连续,如图: (2)将这些图片在NGUI中打包成Altas图集的时候图片应该在同一个Altas中: 这里以播放特效为例,满足条件时播 ...

  8. 关于Unity中如何判断一个动画播放结束

    方法一(强力推荐): 在动画结束帧或其他帧处加个动画事件,在播放到这一帧的时候会自动调用这个动画函数 如图,找到对应动画的inspector面板,在里面有个Events下拉条,下拉后在想要的帧的位置添 ...

  9. 【转】unity Animator 怎么判断一个动画播放结束

    关于unity Animator 怎么判断一个动画播放结束这里有几种方法.希望对大家有帮助.还有其他办法的可以分享一下 第一种方法:在动画结束帧后面加个动画事件,调用下含这个变量的函数接口不是可以了? ...

随机推荐

  1. cogs——2478. [HZOI 2016]简单的最近公共祖先

    2478. [HZOI 2016]简单的最近公共祖先 ★☆   输入文件:easy_LCA.in   输出文件:easy_LCA.out   简单对比时间限制:2 s   内存限制:128 MB [题 ...

  2. python爬取人民币汇率中间价

    python爬取人民币汇率中间价,从最权威的网站中国外汇交易中心. 首先找到相关网页,解析链接,这中间需要经验和耐心,在此不多说. 以人民币兑美元的汇率为例(CNY/USD),脚本详情如下: wind ...

  3. AOP的工作模式

    代理主要有静态代理和动态代理. 静态代理:在代理中实现接口并创建实现类对象,在对实现类的方法增加功能(不常用). 动态代理:实现implements InvocationHandler接口.实现方法: ...

  4. SCOI2011 棘手的操作

    线段树+并查集,对于每个操作我们只需要维护他在自己子树中的最值和在整个树里的最值,类似于线段树动态开点. #include<bits/stdc++.h> using namespace s ...

  5. luoguP4320 道路相遇 圆方树

    标题已经告诉你怎么做了..... 两点间的圆点个数即为所求 建出圆方树后打个树剖求$lca$就行..... 复杂度$O(n + q \log n)$ #include <cstdio> # ...

  6. 用ExifInterface读取经纬度的时候遇到的一个问题

    如果读取图片经纬度,使用 String latValue = exifInterface.getAttribute(ExifInterface.TAG_GPS_LATITUDE); String ln ...

  7. [HAOI2015]数组游戏

    题目大意: 有一排n个格子,每个格子上都有一个白子或黑子,在上面进行游戏,规则如下: 选择一个含白子的格子x,并选择一个数k,翻转x,2x,...,kx格子上的子. 不能操作者负. 思路: 将“某个格 ...

  8. Mysql插入数据时,报错this is incompatible with sql_mode=only_full_group_by

    Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'inform ...

  9. cordova安卓手机<a href="tel:xxx"></a>无法进入拨号界面问题

    在使用cordova开发跨平台APP时,可能会用到点击某个按钮进入拨号界面的问题,HTML中的a标签提供了这个功能,但在部分安卓手机中却没有作用,点击没有反应,解决的方法如下:(在config.xml ...

  10. mysql插入中文乱码问题

    1.show variables like 'character%' 2.修改 MySql安装目录下面的my.ini(MySQL Server Instance Configuration 文件). ...