html视频鼠标移除不播放,html - 在Mouseover上播放Gif并在鼠标移除时暂停Gif而不替换图像？ - 堆栈内存溢出...

所以，我想了一下......你可以做这样的酷事：

首先，将您的gif分解为多个图像，然后使用css关键帧为它们设置动画。

#faux-gif {

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

margin: auto;

background-image: url(http://i.imgur.com/E2ee6fI.gif);

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

width: 300px;

height: 300px;

/* animation: giffy 0.5s infinite linear; */

/* no fade between frames */

animation: giffy 0.5s infinite steps(1);

}

#faux-gif:hover {

animation-play-state:paused;

}

@keyframes giffy {

0% { background-image: url('http://i.imgur.com/E2ee6fI.gif'); }

15% { background-image: url('http://i.imgur.com/JIi0uul.gif'); }

30% { background-image: url('http://i.imgur.com/owNGnNN.gif');}

45% { background-image: url('http://i.imgur.com/2Ii6XOz.gif'); }

60% { background-image: url('http://i.imgur.com/ZmQBrQ5.gif'); }

75% { background-image: url('http://i.imgur.com/iAsfHyY.gif'); }

90% { background-image: url('http://i.imgur.com/AJwRblj.gif'); }

100% { background-image: url('http://i.imgur.com/fx5wUNY.gif'); }

}

JavaScript版本......没有经过彻底的测试，但这是基本的想法。

window.onload = function() {

function FauxGif(element, frames, speed) {

this.currentFrame = 0,

this.domElement = element,

this.frames = frames || null,

this.speed = speed || 200;

this.interval;

this.init();

}

FauxGif.prototype = {

init: function() {

// set the first one to the first image

console.log(this.frames[0])

this.domElement.style.backgroundImage = "url(" + this.frames[0] + ")";

},

pause: function() {

clearInterval(this.interval);

},

resume: function() {

var that = this;

that.interval = setInterval(function(){

that.currentFrame < that.frames.length - 1 ? that.currentFrame++ : that.currentFrame = 0;

that.domElement.style.backgroundImage = "url(" + that.frames[that.currentFrame] + ")";

}, this.speed);

}

}

var frames = [

'http://i.imgur.com/E2ee6fI.gif',

'http://i.imgur.com/JIi0uul.gif',

'http://i.imgur.com/owNGnNN.gif',

'http://i.imgur.com/2Ii6XOz.gif',

'http://i.imgur.com/ZmQBrQ5.gif',

'http://i.imgur.com/iAsfHyY.gif',

'http://i.imgur.com/AJwRblj.gif',

'http://i.imgur.com/fx5wUNY.gif'

]

var elem = document.querySelector('#faux-gif'),

gif = new FauxGif(elem, frames);

elem.addEventListener('mouseenter', function(){

gif.resume()

});

elem.addEventListener('mouseleave', function() {

gif.pause();

});

}