javascript - 使用鼠标事件播放/暂停 gif

Question

我的网页中有一个图像格式 gif。

我想用鼠标在任何图像上运行动画。并且只要鼠标还在那里，它就会停留在最后一帧并且当鼠标退回原始图像时。

有人可以帮忙吗？

Answer 1

类似的东西:

HTML

<div id="images">
    <div class="img img1">
        <img data-gif_src="http://38.media.tumblr.com/tumblr_mdnaeqwmTr1rtuulro1_250.gif" src="http://i.dailymail.co.uk/i/pix/2011/12/25/article-2078552-0F44CB3D00000578-206_468x331.jpg"/>
    </div>    
</div>

CSS

#images .img {
    width: 200px;
    height: 150px;    
}

#images .img img {
    width: 200px;
    height: auto;    
}

JS

$('#images .img img').mouseenter(function(){
    $(this).data('img_src', $(this).attr('src') );
    $(this).attr('src',  $(this).data('gif_src') );  
}).mouseleave( function(){
    $(this).attr('src',  $(this).data('img_src') ); 
});

on jsfiddle