我有一个包含大量GIF的页面.
<img src="gif/1303552574110.1.gif" alt="" >
<img src="gif/1302919192204.gif" alt="" >
<img src="gif/1303642234740.gif" alt="" >
<img src="gif/1303822879528.gif" alt="" >
<img src="gif/1303825584512.gif" alt="" >
我正在寻找什么
1页面加载=>停止所有GIF的动画
2在鼠标悬停时=>为该一个gif启动动画
3在mouseout =>动画再次停止该gif
我想这可以在Jquery中完成,但我不知道如何.
Guf*_*ffa 53
不,您无法控制图像的动画.
您需要每个图像的两个版本,一个是动画的,另一个不是.在悬停时,您可以轻松地从一个图像更改为另一个图像.
例:
$(function(){
$('img').each(function(e){
var src = $(e).attr('src');
$(e).hover(function(){
$(this).attr('src', src.replace('.gif', '_anim.gif'));
}, function(){
$(this).attr('src', src);
});
});
});
时间流逝,可能性也随之改变.正如kritzikatzi指出的那样,拥有两个版本的图像并不是唯一的选择,你可以使用canvas元素来创建动画第一帧的副本.请注意,这并不适用于所有浏览器,例如IE 8不支持canvas元素.
Mar*_*mer 16
我意识到这个答案已经很晚了,但我找到了一个相当简单,优雅,有效的解决方案来解决这个问题,觉得有必要在这里发布.
然而,我觉得我需要明确的一件事是,这不会在鼠标悬停时启动gif动画,在鼠标悬停时暂停它,并在再次鼠标悬停时继续它.遗憾的是,这与GIF无关.(可以使用一个接一个显示的图像来看起来像gif,但是拆开GIF的每一帧并将所有这些URL复制到脚本中会非常耗时)
我的解决方案是做一个图像看起来像是在鼠标悬停时开始移动.你将你的gif的第一帧作为图像并将该图像放在网页上,然后在鼠标悬停时用gif替换图像,看起来它开始移动.它会在mouseout上重置.
只需在HTML的head部分插入此脚本即可:
$(document).ready(function()
{
$("#imgAnimate").hover(
function()
{
$(this).attr("src", "GIF URL HERE");
},
function()
{
$(this).attr("src", "STATIC IMAGE URL HERE");
});
});
并将此代码放在要动画的图像的img标记中.
id="imgAnimate"
这将在鼠标悬停时加载gif,因此看起来你的图像开始移动.(这比加载gif onload更好,因为从静态图像到gif的转换是不连贯的,因为gif将在随机帧上开始)
对于多个图像,只需重新创建脚本即可创建一个函数:
<script type="text/javascript">
var staticGifSuffix = "-static.gif";
var gifSuffix = ".gif";
$(document).ready(function() {
$(".img-animate").each(function () {
$(this).hover(
function()
{
var originalSrc = $(this).attr("src");
$(this).attr("src", originalSrc.replace(staticGifSuffix, gifSuffix));
},
function()
{
var originalSrc = $(this).attr("src");
$(this).attr("src", originalSrc.replace(gifSuffix, staticGifSuffix));
}
);
});
});
</script>
</head>
<body>
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
</body>
该代码块是一个功能正常的网页(基于您提供给我的信息),它将显示静态图像并悬停,加载和显示gif.您所要做的就是插入静态图像的URL.
我认为jQuery插件freezeframe.js可能会派上用场.freezeframe.js是一个jQuery插件,可自动暂停GIF并重新启动鼠标悬停动画.
我想你可以轻松地调整它,使其适用于页面加载.
最好的选择可能是有一个静止图像,当你想要停止它时你可以替换它.
<img src="gif/1303552574110.1.gif" alt="" class="anim" >
<img src="gif/1302919192204.gif" alt="" class="anim" >
<img src="gif/1303642234740.gif" alt="" class="anim" >
<img src="gif/1303822879528.gif" alt="" class="anim" >
<img src="gif/1303825584512.gif" alt="" class="anim" >
$(window).load(function() {
$(".anim").src("stillimage.gif");
});
$(".anim").mouseover(function {
$(this).src("animatedimage.gif");
});
$(".anim").mouseout(function {
$(this).src("stillimage.gif");
});
您可能希望有两个数组包含静态和动画GIF的路径,您可以将这些路径分配给每个图像.