我有一个页面里有很多的GIF动画。
<img src="gif/1303552574110.1.gif" alt="" >
<img src="gif/1302919192204.gif" alt="" >
<img src="gif/1303642234740.gif" alt="" >
<img src="gif/1303822879528.gif" alt="" >
<img src="gif/1303825584512.gif" alt="" >
我想要的
1 在页面加载时 => 所有gif的动画都停止
2 鼠标悬停时 => 该gif的动画开始
3 鼠标移开时 => 该gif的动画再次停止
我想这可以用jQuery实现，但我不知道怎么做。
不能控制图像的动画。
你需要两个版本的每个图像，一个是动画的，另一个不是动画的。在悬停时，可以轻松地从一个图像切换到另一个图像。
示例：
$(function(){
$('img').each(function(e){
var src = $(e).attr('src');
$(e).hover(function(){
$(this).attr('src', src.replace('.gif', '_anim.gif'));
}, function(){
$(this).attr('src', src);
});
});
});
时间过去了，可能性也随之改变。正如kritzikatzi所指出的那样，拥有两个版本的图像并不是唯一的选择，你可以使用canvas元素来创建动画的第一帧的副本。请注意，这在所有浏览器中都不起作用， 例如，IE 8不支持canvas元素。
我知道这个答案有些晚，但是我发现了一个相当简单、优雅且有效的解决方法，并觉得有必要在这里发布。
然而，需要明确一点的是，这并不能在鼠标悬停时启动gif动画，在鼠标移出时暂停它，并在再次悬停时继续它。不幸的是，这是不可能实现的。（可以使用一系列按顺序显示的图像来模拟gif的效果，但是拆分gif的每一帧并将所有那些url复制到脚本中会很耗时）
我的解决方案是让图像在鼠标悬停时看起来像开始移动。您可以将gif的第一帧制作成一个图像，并将该图像放在网页上，然后在鼠标悬停时用gif替换该图像，看起来就像它开始移动了。鼠标移出时重置为初始状态。
只需将此脚本插入HTML头部即可：
$(document).ready(function()
{
$("#imgAnimate").hover(
function()
{
$(this).attr("src", "GIF URL HERE");
},
function()
{
$(this).attr("src", "STATIC IMAGE URL HERE");
});
});
id="imgAnimate"
这将在鼠标悬停时加载gif，因此您的图像似乎开始移动。(这比在加载时加载gif更好，因为静态图像到gif的转换会出现不连贯，因为gif将从随机帧开始)
对于多个图像，只需创建一个函数：
<script type="text/javascript">
var staticGifSuffix = "-static.gif";
var gifSuffix = ".gif";
$(document).ready(function() {
$(".img-animate").each(function () {
$(this).hover(
function()
{
var originalSrc = $(this).attr("src");
$(this).attr("src", originalSrc.replace(staticGifSuffix, gifSuffix));
},
function()
{
var originalSrc = $(this).attr("src");
$(this).attr("src", originalSrc.replace(gifSuffix, staticGifSuffix));
}
);
});
});
</script>
</head>
<body>
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
</body>
根据你提供的信息，该代码块是一个功能完整的网页，它将显示静态图像，并在悬停时加载并显示 gif 动画。您只需要插入静态图像的 URL 即可。
$("img").each(function () { $(this).hover(function () { ... }) });并使用命名约定。 - Honest Objections <img src="gif/1303552574110.1.gif" alt="" class="anim" >
<img src="gif/1302919192204.gif" alt="" class="anim" >
<img src="gif/1303642234740.gif" alt="" class="anim" >
<img src="gif/1303822879528.gif" alt="" class="anim" >
<img src="gif/1303825584512.gif" alt="" class="anim" >
$(window).load(function() {
$(".anim").src("stillimage.gif");
});
$(".anim").mouseover(function {
$(this).src("animatedimage.gif");
});
$(".anim").mouseout(function {
$(this).src("stillimage.gif");
});
您可能希望有两个包含静态和动态GIF路径的数组，可以将它们分配给每个图像。
在这里找到了一个有效的解决方案： https://codepen.io/hoanghals/pen/dZrWLZ
JavaScript代码如下：
var gifElements = document.querySelectorAll('img.gif');
for(var e in gifElements) {
var element = gifElements[e];
if(element.nodeName == 'IMG') {
var supergif = new SuperGif({
gif: element,
progressbar_height: 0,
auto_play: false,
});
var controlElement = document.createElement("div");
controlElement.className = "gifcontrol loading g"+e;
supergif.load((function(controlElement) {
controlElement.className = "gifcontrol paused";
var playing = false;
controlElement.addEventListener("click", function(){
if(playing) {
this.pause();
playing = false;
controlElement.className = "gifcontrol paused";
} else {
this.play();
playing = true;
controlElement.className = "gifcontrol playing";
}
}.bind(this, controlElement));
}.bind(supergif))(controlElement));
var canvas = supergif.get_canvas();
controlElement.style.width = canvas.width+"px";
controlElement.style.height = canvas.height+"px";
controlElement.style.left = canvas.offsetLeft+"px";
var containerElement = canvas.parentNode;
containerElement.appendChild(controlElement);
}
}
[].forEach.call(document.querySelectorAll('.myimg'), function(elem) {
var img = new Image();
img.onload = function(event) {
elem.previousElementSibling.getContext('2d').drawImage(img, 0, 0);
};
img.src = elem.getAttribute('data-src');
elem.onmouseover = function(event) {
event.target.src = event.target.getAttribute('data-src');
};
elem.onmouseout = function(event) {
event.target.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
};
});.mydiv{
width: 320px;
height: 240px;
position: relative;
}
.mycanvas, .myimg {
width: 100%;
height: 100%;
position: absolute;
}<div class="mydiv">
<canvas class="mycanvas" width=320 height=240></canvas>
<img class="myimg" data-src="https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif">
</div>SuperGif()。我不认为Sourabh解释过这个，CodePen也没有。一个简单的搜索显示，它在buzzfeed/libgif-js中定义，可以从https://github.com/buzzfeed/libgif-js#readme下载。找到下面红色箭头指向的控件，然后点击绿色的“Code”按钮。（注：你看不到红色箭头：那是我告诉你在哪里查找。）
一个菜单将弹出，提供各种选项，包括下载一个zip文件。下载它，并将其解压缩到您的HTML目录或其子目录中。
接下来，我将展示我制作的两个页面。第一个是从CodePen派生的。第二个则脱离了其基本要素，并显示了使用SuperGif所需的最小限度。
这是第一页的完整HTML、CSS和JavaScript代码。在HTML的head部分有一个链接到libgif.js，这是您从zip文件中需要的文件。然后，HTML的body部分以一些关于猫图片的文本开头，并跟随一个动画猫GIF的链接https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif。
然后继续一些CSS。CodePen使用SCSS，对于任何不知道的人来说，SCSS必须被预处理为CSS。我已经做到了，因此下面的代码是真正的CSS。
最后，就是JavaScript了。
<html>
<head>
<script src="libgif-js-master/libgif.js"></script>
</head>
<body>
<div style="width: 600px; margin: auto; text-align: center; font-family: arial">
<p>
And so, the unwritten law of the internet, that any
experiment involving video/images must involve cats in
one way or another, reared its head again. When would
the internet's fascination with cats come to an end?
Never. The answer is "Never".
</p>
<img src='https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif' class='gif' />
</div>
<style>
img.gif {
visibility: hidden;
}
.jsgif {
position: relative;
}
.gifcontrol {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: pointer;
transition: background 0.25s ease-in-out;
z-index: 100;
}
.gifcontrol:after {
transition: background 0.25s ease-in-out;
position: absolute;
content: "";
display: block;
left: calc(50% - 25px);
top: calc(50% - 25px);
}
.gifcontrol.loading {
background: rgba(255, 255, 255, 0.75);
}
.gifcontrol.loading:after {
background: #FF9900;
width: 50px;
height: 50px;
border-radius: 50px;
}
.gifcontrol.playing {
/* Only show the 'stop' button on hover */
}
.gifcontrol.playing:after {
opacity: 0;
transition: opacity 0.25s ease-in-out;
border-left: 20px solid #FF9900;
border-right: 20px solid #FF9900;
width: 50px;
height: 50px;
box-sizing: border-box;
}
.gifcontrol.playing:hover:after {
opacity: 1;
}
.gifcontrol.paused {
background: rgba(255, 255, 255, 0.5);
}
.gifcontrol.paused:after {
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent transparent transparent #ff9900;
}
</style>
<script>
var gifElements = document.querySelectorAll('img.gif');
for(var e in gifElements) {
var element = gifElements[e];
if(element.nodeName == 'IMG') {
var supergif = new SuperGif({
gif: element,
progressbar_height: 0,
auto_play: false,
});
var controlElement = document.createElement("div");
controlElement.className = "gifcontrol loading g"+e;
supergif.load((function(controlElement) {
controlElement.className = "gifcontrol paused";
var playing = false;
controlElement.addEventListener("click", function(){
if(playing) {
this.pause();
playing = false;
controlElement.className = "gifcontrol paused";
} else {
this.play();
playing = true;
controlElement.className = "gifcontrol playing";
}
}.bind(this, controlElement));
}.bind(supergif))(controlElement));
var canvas = supergif.get_canvas();
controlElement.style.width = canvas.width+"px";
controlElement.style.height = canvas.height+"px";
controlElement.style.left = canvas.offsetLeft+"px";
var containerElement = canvas.parentNode;
containerElement.appendChild(controlElement);
}
}
</script>
</body>
</html>
<html>
<head>
<script src="libgif-js-master/libgif.js"></script>
</head>
<body>
<button type="button" onclick="play()"
id="play_button"
style="margin-right:9px;"
>
Play
</button>
<button type="button" onclick="pause()"
id="pause_button"
>
Pause
</button>
<img src="https://media.giphy.com/media/Byana3FscAMGQ/giphy.gif"
id="gif"
/>
<script>
var gif_element = document.getElementById( "gif" );
var supergif = new SuperGif( {
gif: gif_element,
progressbar_height: 0,
auto_play: false
} );
supergif.load();
function play()
{
var play_button = document.getElementById( "play_button" );
play_button.disabled = true;
var pause_button = document.getElementById( "pause_button" );
pause_button.disabled = false;
supergif.play();
}
function pause()
{
var play_button = document.getElementById( "play_button" );
play_button.disabled = false;
var pause_button = document.getElementById( "pause_button" );
pause_button.disabled = true;
supergif.pause();
}
pause_button.disabled = true;
</script>
</body>
</html>
<div class="thumbnail-wrapper">
<img src="blah.jpg">
</div>
样式表：
.thumbnail-wrapper{
width:190px;
height:100px;
overflow:hidden;
position:absolute;
}
.thumbnail-wrapper img{
position:relative;
top:0;
}
这是JS代码：
var gifTimer;
var currentGifId=null;
var step = 100; //height of a thumbnail
$('.thumbnail-wrapper img').hover(
function(){
currentGifId = $(this)
gifTimer = setInterval(playGif,500);
},
function(){
clearInterval(gifTimer);
currentGifId=null;
}
);
var playGif = function(){
var top = parseInt(currentGifId.css('top'))-step;
var max = currentGifId.height();
console.log(top,max)
if(max+top<=0){
console.log('reset')
top=0;
}
currentGifId.css('top',top);
}
显然，这可以进一步优化，但我为了易读性简化了这个例子。
function animateImg(id, gifSrc){
var $el = $(id),
staticSrc = $el.attr('src');
$el.hover(
function(){
$(this).attr("src", gifSrc);
},
function(){
$(this).attr("src", staticSrc);
});
}
$(document).ready(function(){
animateImg('#id1', 'gif/gif1.gif');
animateImg('#id2', 'gif/gif2.gif');
});
或者更好的方法是使用数据属性：
$(document).ready(function(){
$('.animated-img').each(function(){
var $el = $(this),
staticSrc = $el.attr('src'),
gifSrc = $el.data('gifSrc');
$el.hover(
function(){
$(this).attr("src", gifSrc);
},
function(){
$(this).attr("src", staticSrc);
});
});
});
而img元素可能看起来像这样：
<img class="animated-img" src=".../img.jpg" data-gif-src=".../gif.gif" />
要重新启动 gif 图像的动画，您可以使用以下代码：
$('#img_gif').attr('src','file.gif?' + Math.random());