想控制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
欢迎访问GBin1.com
标签:
javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
2012-07-24 兄弟割席:HTML5标准制定组织分裂
2012-07-24 30个绝对让你惊叹的幽默创意广告设计