CSS或JS实现gif动态图片的停止与播放
来源:互联网 发布:daogrs知乎 编辑:程序博客网 时间:2024/05/20 06:39
if ('getContext' in document.createElement('canvas')) { HTMLImageElement.prototype.play = function() { if (this.storeCanvas) { // 移除存储的canvas this.storeCanvas.parentElement.removeChild(this.storeCanvas); this.storeCanvas = null; // 透明度还原 image.style.opacity = ''; } if (this.storeUrl) { this.src = this.storeUrl; } }; HTMLImageElement.prototype.stop = function() { var canvas = document.createElement('canvas'); // 尺寸 var width = this.width, height = this.height; if (width && height) { // 存储之前的地址 if (!this.storeUrl) { this.storeUrl = this.src; } // canvas大小 canvas.width = width; canvas.height = height; // 绘制图片帧(第一帧) canvas.getContext('2d').drawImage(this, 0, 0, width, height); // 重置当前图片 try { this.src = canvas.toDataURL("image/gif"); } catch(e) { // 跨域 this.removeAttribute('src'); // 载入canvas元素 canvas.style.position = 'absolute'; // 前面插入图片 this.parentElement.insertBefore(canvas, this); // 隐藏原图 this.style.opacity = '0'; // 存储canvas this.storeCanvas = canvas; } } };}
大家只要在页面中自己的JS文件中复制上面的代码,然后就可以直接:
var image = document.getElementsByTagName("img")[0];// 停止gif图片image.stop();// 播放gif图片image.play();
1. IE9+支持。IE7/IE8不支持canvas没搞头。
2. 只能停止gif,不能真正意义的暂停。因为canvas获得的gif图片信息为第一帧的信息,后面的貌似获取不到。要想实现暂停,而不是停止,还需要进一步研究。
原文链接:http://www.zhangxinxu.com/wordpress/2015/12/css3-animation-js-canvas-gif-pause-stop-play/
1 0
- CSS或JS实现gif动态图片的停止与播放
- CSS或JS实现gif动态图片的停止与播放
- android 播放网络或本地gif格式的动态图片
- JS控制GIF图片的停止与显示(掷骰子实现)
- IE6下页面gif图片停止播放的问题
- IOS 播放动态Gif图片
- Qt:播放动态gif图片
- Android播放Gif动态图片的几种方式
- Android播放Gif动态图片的几种方式
- Android播放Gif动态图片的几种方法
- Android 显示和控制gif动态图片的播放
- 播放、停止gif动画
- css js 实现图片动态切换
- 简单的Fresco加载图片和GIF图片加载与停止
- Windows Mobile C#实现GIF图片播放
- Android 实现播放本地GIF图片
- Android轻松实现播放Gif图片
- 实现android gif图片动画播放功能
- 懒人开始写博,mark一下
- 【bzoj2967】【JSOI2008】【Blue Mary的战役地图】【hash】
- Android自助餐之动画(二)补间动画
- HDU 1197 Specialized Four-Digit Numbers【水】
- Java并发编程:ThreadPoolExecutor类及方法源码分析
- CSS或JS实现gif动态图片的停止与播放
- leveldb代码阅读(7)——插入数据
- 多次备份文件,VBScript和Shell
- 数据结构——链表
- 简单代码实现(补昨天的.....)
- Notifications
- maven介绍及常用命令(一)
- Android自助餐之动画(二)属性动画
- Fragment跳转时传递参数及结果回传的方法