我正在尝试寻找允许用户在鼠标悬停时为gif设置动画并在鼠标移出时暂停的代码示例。我看过很多关于这个的教程,但我想要一个不同的效果。
我注意到大多数GIF在鼠标移出时“重置”了。也就是说,要么用通用图像覆盖gif,要么动画回复到开头。我想要实现的是一个更加无缝的“暂停”,它允许您在不使用占位符图像的情况下从中断的位置开始。与此页面上的示例类似:
http://www.valhead.com/2013/03/11/animation-play-state/
请注意,当您将鼠标放在图像上时,动画只会暂停而不会替换任何内容,否则会重新开始。
我不知道是否可以使用gif,因为这个例子使用的是基本的css形状,但必须有一些方法可以暂停鼠标上的gif并在鼠标悬停时继续,而不会在循环动画上覆盖图像?如果没有,有没有办法使用暂停鼠标悬停的电影文件,并将鼠标悬停在它上面的位置播放?
谢谢!
编辑:感谢@brbcoding和他的天才,这个问题已经解决了!有关解决方案的详细信息,请参阅以下帖子或其博客文章:http://codyhenshaw.com/blog/2013/12/17/faux-animated-gifs-with-css3-keyframes/答案 0 :(得分:15)
所以,我想了一下......你可以做这样的酷事:
首先,将你的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'); }
}
<强> DEMO 强>
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();
});
}
<强> DEMO 强>
答案 1 :(得分:1)
没有。 Gif图像无法“看到”鼠标。它们只是显示的图像。为了暂停动画gif,它需要交换一个没有动画的类似图像。
发布的内容中,jquery plug ins to animate a sprite由静态图片组成。这些插件将允许精灵在鼠标悬停上暂停