想控制GIF图片动画播放吗?试试gifffer.js
2023-09-11 14:20:44 时间
在线演示: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
相关文章
- JS 逆向 --- 过无限debugge、hook、js混淆还原、控制流混淆
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
- 【Js】前端使用xlsx.full.min.js读取和导出excel表格数据
- JS基础 函数进阶
- JS基础 流程控制
- 微信小程序 - 引入使用 Moment.js 日期处理库(详细教程)
- Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件(在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件)
- JS魔法堂:深究JS异步编程模型
- js removeChild
- Iframe 高度自适应,js控制Iframe 高度自适应
- js 数组 map() 基本用法--需求:1.处理数组对象----2.处理对象中包含多个对象-返回一个数组对象
- JS高阶---数据、变量、内存
- JS 将数字字符串数组转为 数字数组 (互换),js获取数组对象中 某一个key的值,js判断一个数组是否包含另一个数组(一维数组)
- JS-获取URL请求参数
- JS魔法堂:再识Bitwise Operation & Bitwise Shift
- vue2 - 基于Export2Excel.js导出Excel案例(js-xlsx插件二次封装使用)
- Js正则Replace方法
- JS来控制div高度的自适应,html中有多个div,div需要根据屏幕和浏览器的高度实现高度的自动变化,div嵌套的有 iframe ,iframe用来展示网络资源内容
- Three.js Example 注解 —— canvas_materials_normal.html