相关疑难解决方法(0)

我在img标签中有一个动画gif,我从重写src属性开始.但是,创建了gif循环,我只希望它播放一次.有没有办法,使用Javascript或jQuery,阻止动画gif不止一次播放？

我找到了答案,我找到了,但我不知道如何使用它.

停止gif动画onload,在mouseover上启动激活

Guffa对这个问题的回答正是我想要的,但我不知道如何使用该代码.

我有jquery插件,但我在哪里放置代码(不是插件; Guffa的答案中的代码)？如何在参考图像时使用它？是否有一个功能我必须打电话让它工作？如果是这样,最好的方法是什么？

很抱歉提出一个已经回答的问题,但他的答案不够具体,我无法发表评论,要求他提供更具体的答案.

我<img>在静态HTML文档中有以下标记.

<img src="foo.gif" alt="This is an animated gif image, but it does not move"/>

在我将其src属性设置为指向.gif文件(即foo.gif)后,GIF显示为静态(或非移动)图像.我如何为GIF制作动画？

我想在页面上有一个动画角色,为不同的行为设置不同的动画.我目前有两个关于它如何工作的想法:

IDEA 1:将每个行为都设置为动画GIF,并在切换行为时使用JavaScript切换GIF文件.好处:动画在图像本身,为JS留下较少的工作.缺点:我不知道(我知道)JavaScript可以告诉GIF在什么帧,动画结束/循环等等.

IDEA 2:将每个动画的每个帧都作为PNG图像并使用JS在帧之间切换,使用一些预加载器确保在动画开始之前所有图像都准备就绪.上升:对动画序列的更多控制.缺点:很多帧...

这两个想法中的哪一个会更好？(我想避免使用Flash,顺便说一句)
我自己倾向于想法2,因为它提供了更好的控制.由于该站点已经有一个每50ms运行一次的计时器,因此将该动画添加到该计时器系统并不会太多.

当你将鼠标悬停在它上面时是否可以启动.gif动画,当你没有悬停在它上面时暂停它？我不想在停止悬停在图像上时将图像重置为动画的开头.

编辑:谢谢你的帮助,但没有像我想要的那样工作.我找到的最佳解决方案是:

HTML:

<img id="gif1" src="static1.jpg">

JS:

$("#gif1").hover(
    function() {
        $(this).attr("src", "animate1.gif");
    },
    function() {
        $(this).attr("src", "static1.jpg");
    }                         
);  

所以,只是重置东西.

我想要实现的是交互式动画徽标。默认情况下，它位于第 1 帧。悬停时，它会向前播放并在最后一帧处停止。在 mouseleave 上，它从最后一帧播放到第一帧（向后）并在第一帧停止。如果在向前动画期间鼠标离开 -> 获取当前帧并向后播放。

我尝试使用画布和精灵来做到这一点，但这非常具有挑战性。其实我也不太明白。我尝试过这个插件，但它的可能性有限。

所以我想知道是否可以使用 GIF 来做到这一点？也许我可以获取当前的动画帧并从该帧向后播放 gif？

所以我试图将这些图像放在我正在构建的页面的侧边栏上,这些图像是静态的,但是当你鼠标悬停时它们会像GIF一样动画.我目前的设置是让background-imagecss属性图像正常为静态jpg,但在鼠标悬停时更改为动画gif.这是代码,更好地说明我的观点.

CSS:

#segments li a.fnb {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/fnb%21-small.jpg); /*fallback*/
}

#segments li a.whhu {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/still.jpg);
}

#segments li a.fnb:hover {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif);
}

#segments li a.whhu:hover {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif);
}

我会把你从其余的中解脱出来,没有必要说明我的观点.

HTML:

<ul id="segments">
    <li><a href="http://collabprojekt.com/tagged/fnb!" class="fnb"></a></li>
    <li><a href="http://collabprojekt.com/tagged/whhu" class="whhu"></a></li>
</ul>

该网站是http://tcptest.tumblr.com,请查看左侧栏中的图片,了解它目前是如何运作的.

这是有效的,但我唯一的问题是,对于第一次悬停,它必须加载gif,这会导致一个短暂的时刻,当它加载gif时框变为空白.虽然这不是一个大问题,但看起来真的很不专业.

我尝试了使用JS的这个想法(链接),但它让我失望了.

所以我想我的问题是:有没有更好的方法来使用CSS甚至任何其他语言来做到这一点,这样我就不会得到这个随机的空白时刻？

我想在用户将鼠标悬停在视频缩略图上时创建效果,它将通过显示该视频中的特定帧数来预览视频.

是否有一个jquery插件或其他类型的教程来教授这种效果？

我想使用 gif 图像制作鼠标效果，但问题是图像不是从头开始的。 html 代码：
<div style="width: 100px;height: 100px;background: red;" onclick="myFunction(this,event)"></div>
JavaScript 代码：

function myFunction(ele,e)
{
var x = e.clientX - 15;
var y = e.clientY - 15;
var effect = document.createElement("DIV");
effect.style.background="url('http://s12.postimg.org/piulwsk61/image.gif')";
effect.style.backgroundSize="100% 100%";
effect.style.width="75px";
effect.style.height="75px";
effect.style.zIndex="1";
effect.style.position="fixed";
effect.style.top=y;
effect.style.left=x;
ele.appendChild(effect);
setTimeout(function(){ele.removeChild(effect);},700);
}

问题已解决：
javascript代码：

function myFunction(ele,e)
{
var x = e.clientX - 15;
var y = e.clientY - 15;
var effect = document.createElement("IMG");
effect.style.src="http://s12.postimg.org/piulwsk61/image.gif";
effect.style.width="75px";
effect.style.height="75px";
effect.style.zIndex="1";
effect.style.position="fixed";
effect.style.top=y;
effect.style.left=x;
ele.appendChild(effect);
setTimeout(function(){ele.removeChild(effect);},700);
}

我正在玩我几天前创建的新网站.
该网站包含很多很多GIF,显示在首页上.截至目前,显示了静态的.png缩略图,当悬停时,它会显示gif.

这几乎是我想要的.但是,截至目前,该网站预先加载了页面上的每个gif,这需要很长时间,浪费了大量流量.如果首页上有50个GIF,每个gif是2mb,那就是每个用户100mb的流量.
是不是只能加载每个png,然后加载gif如果它徘徊？我知道第一次播放不顺畅,但我的网络酒店没有大量的网络流量.

这可能是一些PHP或旧的JavaScript吗？

谢谢