Question

如果鼠标悬停在图片上，如何运行我的.gif文件？

<html>
<body>

<div id="img_wrap" class="static">

   <img id="animated" src="database.gif">
   <img id="static" src="database.png">

<script type="text/javascript">


  $(function(){
    $('#img_wrap').on( 'mouseenter', function() {
         $(this).toggleClass('animated', 'static');

    })
})
</script>

</body>
</html>

Answer 1

或者您可以使用css来执行此操作

小提琴：http://jsfiddle.net/parslook/pHcXa/3/

CSS

body {
    background-color:#282828;
}


.image {
    background: url(http://swish.wodip.opole.pl/forum/files/thumbs/t_spirala_157.png);
    width:300px;
    height:310px;
    background-size:300px;
}

.image:hover {
    background: url(http://www.laboiteverte.fr/wp-content/uploads/2010/10/gif-psychedelique-hypnose-animation-11.gif);
    width:300px;
    height:310px;
    background-size:300px;
}

HTML

<div class="image">

</div>

Answer 2

DEMO

$(function () {
    $('#img_wrap').on('hover', function () {
        $(this).toggleClass('animated').toggleClass('static');
    }, function () {
        $(this).toggleClass('animated').toggleClass('static');
    });
});

.hover()

Answer 3

尝试：

$('#animated').hide();
var toggleImages = function(){
  $('#animated, #static').toggle();
};
$('#img_wrap').on('hover', toggleImages, toggleImages);

Answer 4

我将gif加载到display none中作为预加载并在鼠标上更改img源代码，以便gif从头开始（如果你显示的内容不是循环等）

http://jsfiddle.net/pHcXa/2/

$('#static').on('mouseover', function() {
     this.src ='http://www.laboiteverte.fr/wp-content/uploads/2010/10/gif-psychedelique-hypnose-animation-11.gif';
})
$('#static').on( 'mouseout', function() {
     this.src ='http://swish.wodip.opole.pl/forum/files/thumbs/t_spirala_157.png';
})

如果鼠标悬停在图片上，如何运行我的.gif文件？

4 个答案: