1

仅当鼠标悬停在图片上时如何运行我的 .gif 文件？

演示：http: //jsfiddle.net/pHcXa/

<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>
4

5 回答 5

3

或者您可以使用 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>
于 2013-09-12T14:48:39.893 回答
2

演示

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

。徘徊（）

于 2013-09-12T14:41:17.583 回答
0

尝试：

$('#animated').hide();
var toggleImages = function(){
  $('#animated, #static').toggle();
};
$('#img_wrap').on('hover', toggleImages, toggleImages);
于 2013-09-12T14:45:48.713 回答
0

我会将 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';
})
于 2013-09-12T14:46:17.643 回答
0

也许，一些寻找相同解决方案的人会发现这个值得：

<html>
<style>
#img_wrap{
    width:200px;height:200px; // set width & height as of your images' sizes.
    background:url("database.png") center center no-repeat;
}
</style>
<body>

<div id="img_wrap" class="static">
<script type="text/javascript">
$('#img_wrap').hover(function(){
  $(this).css('background', 'url("database.gif") center center no-repeat;');
});
$('#img_wrap').mouseover(function(){
  $(this).css('background', 'url("database.png") center center no-repeat;');
});
</script>

</body>
</html>
于 2022-01-21T14:27:07.780 回答