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;    
}

IS

$('#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

用鼠标事件播放/暂停gif

1 个答案: