在您的情况下,由于动画并不复杂,我的建议是在页面上放置两张图片(一张是动态的,一张是静态的),并在鼠标移入/移出时显示/隐藏它们。
<div id="img_wrap" class="static">
<img id="animated" src="animated.gif" alt="">
<img id="static" src="static.jpg" alt="">
</div>
脚本:
$(function(){
$('#img_wrap').on( 'mouseenter', function() {
$(this).toggleClass('animated', 'static');
})
})
CSS:
.animated #static, .static #animated {
display: none;
}
.animated #animated, .static #static {
display: inline;
}
如果您不需要支持IE6(它只在<a>
上触发hover
事件),您甚至可以使用普通的CSS来实现:
CSS:
#img_wrap #static, #img_wrap:hover #animated {
display: inline;
}
#img_wrap #animated, #img_wrap:hover #static {
display: none;
}
如果您只想在不进行动画时显示固定的静态图像,那么只需使用CSS或JS更改悬停时的图像即可。
但是,如果您想在鼠标移出时实际上冻结当前帧的动画,则唯一的方法是手动对图像进行动画处理,例如使用JS:
(function(){
var imgDownload = $('#BtnDownload'), interval = 250;
function startAnimation(img, interval, frameCount) {
var src, prefix, ext, toId;
if (frameCount) img.data('frames', frameCount);
interval = interval || img.data('interval');
src = img.attr('src').split('.');
ext = src.pop();
prefix = src.join('.');
img.data('ext') || img.data('ext', ext);
img.data('prefix') || img.data('prefix', prefix);
restartAnimation(img, interval);
img.hover(function() {
restartAnimation(img, interval);
});
img.mouseout(function() {
clearTimeout($(this).data('timeout-id'));
});
}
function restartAnimation(img, interval) {
todId = setTimeout(animate, interval, img);
img.data('timeout-id', toId);
}
function animate(img) {
var currentFrame, nextFrame, frameCount, prefix, ext;
currentFrame = img.data('current-frame');
frameCount = img.data('frames');
prefix = img.data('prefix');
ext = img.data('ext');
nextFrame = currentFrame + 1;
if (nextFrame >= frameCount) nextFrame = 0;
img.data('current-frame', nextFrame);
img.attr('src', prefix + (nextFrame? nextFrame : '') + '.' + ext);
}
startAnimation(imgDownload, interval);
)());
以及以下的HTML代码:
<img src="/img/btn_download.png" alt="Download" data-frames="6">
以及这些图像:
/img/btn_download.png
/img/btn_download1.png
/img/btn_download2.png
/img/btn_download3.png
/img/btn_download4.png
/img/btn_download5.png
注意: 这是一个简单的实现。对于生产代码,您需要预加载图像或仅使用spritemaps。但基本概念是相同的-手动动画图像/按钮,以便在冻结动画时,它会冻结在当前帧上。另一种选择是使用jsgif之类的东西,它使用XHR下载GIF文件,解析二进制数据以提取单个帧,然后使用HTML5 Canvas呈现它们。
hover
会导致无限重复动画的GIF在第一次迭代后停止播放? - Lèse majesté不,您无法控制图像的动画。
您需要两个版本的每个图像,一个是动画的,另一个是非动画的。在悬停时,您可以轻松地从一个图像切换到另一个图像。
<div>
<img class="static" src="https://webpage.com/image1.png">
<img class="active" src="https://webpage.com/image2.gif">
</div>
.static {
position:absolute;
background: white;
}
.static:hover {
opacity:0;
}