Я понимаю, что этот ответ опоздал, но я нашел довольно простое, элегантное и эффективное решение этой проблемы и счел необходимым опубликовать его здесь.
Однако я чувствую, что мне нужно кое-что прояснитьзаключается в том, что это не запускает gif-анимацию при наведении мыши, приостанавливает ее при наведении мыши и продолжает ее при повторном наведении мыши.К сожалению, это невозможно сделать с гифками.(Можно сделать так, чтобы строка изображений, отображаемых одно за другим, выглядела как gif, но разбирать каждый кадр вашего gif-файла и копировать все эти URL-адреса в сценарий потребовало бы много времени)
Что мойРешение - сделать изображение похожим на движущееся при наведении мыши.Вы делаете первый кадр вашего gif изображения и помещаете это изображение на веб-страницу, затем заменяете изображение gif при наведении курсора мыши, и похоже, что оно начинает двигаться.Он сбрасывается при наведении мыши.
Просто вставьте этот скрипт в раздел head вашего HTML:
$(document).ready(function()
{
$("#imgAnimate").hover(
function()
{
$(this).attr("src", "GIF URL HERE");
},
function()
{
$(this).attr("src", "STATIC IMAGE URL HERE");
});
});
И поместите этот код в тег img изображения, которое вы хотите анимировать.
id="imgAnimate"
Это загрузит GIF при наведении мыши, так что будет казаться, что ваше изображение начинает двигаться.(Это лучше, чем загрузка GIF onload, потому что тогда переход от статического изображения к 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 для статических изображений.