如果我有一个仅运行单个动画的 IE 动画 gif。它不循环,有没有办法使用 jquery 或任何与此相关的东西来告诉动画何时完成?我不想告诉文件是否已完全加载,但动画已经运行完毕。
我认为没有办法从 JavaScript 中检测到它。我会选择不同的解决方案。
创建一个静态图像(可以是任何格式,JPEG、PNG、GIF),每个图像下方都有原始动画的帧
其他。像这样:
┌───┐
│ 1 │
├───┤
│ 2 │
├───┤
│ 3 │
├───┤
│ 4 │
└───┘
然后你可以创建一个<div/>
例如,使用帧的尺寸并将这个长静态图像设置为背景,然后每隔 n 毫秒移动一次背景。
测试代码
$(function() {
var width = 20, height = 20, frames = 3;
var $div = $(document.createElement('div'))
.css({
backgroundImage: 'url(test.png)',
width: width + 'px',
height: height + 'px'
})
.appendTo(document.body);
var frame = 0;
setInterval(function () {
frame++;
if (frame > frames) { frame = 0; }
$div.css('background-position', '0 ' + -1 * frame * height + 'px');
}, 250);
});
Update
谷歌对 +1 按钮做了同样的事情,但他们是水平的,而不是垂直的,就像前面的例子一样:在这里检查 https://i.stack.imgur.com/h4HYL.png.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)