停止加载gif动画，鼠标悬停时启动激活

问题描述

我的页面上有很多GIF.

I have a page with a lot of GIFs.

<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的动画均已停止

1 On page load => Animations for all gifs are stopped

2鼠标悬停=>动画从该一张gif开始

2 On mouseover => Animations starts for that one gif

3在将鼠标移出=>时，该gif动画再次停止

3 On mouseout => Animation stops again for that gif

我想这可以在Jquery中完成，但是我不知道怎么做.

I suppose this can be done in Jquery but I don't know how.

推荐答案

不，您无法控制图像的动画.

No, you can't control the animation of the images.

每个图像需要两个版本，一个是动画版本，一个不是动画版本.悬停时，您可以轻松地从一个图像更改为另一个图像.

You would need two versions of each image, one that is animated, and one that's not. On hover you can easily change from one image to another.

示例:

$(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元素.

Update:

Time goes by, and possibilities change. As kritzikatzi pointed out, having two versions of the image is not the only option, you can apparently use a canvas element to create a copy of the first frame of the animation. Note that this doesn't work in all browsers, IE 8 for example doesn't support the canvas element.

这篇关于停止加载gif动画，鼠标悬停时启动激活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！