提高gif动画的触发能力
提高gif动画的触发能力
提问于 2013-06-11 20:51:01
更新:现在使用另一种方法解决了我的问题(有关详细信息，请参阅接受的答案)。
标准的wordpress安装，我在页面底部有4个导航“按钮”。每个按钮由2个由鼠标输入和鼠标输出事件触发的动画gif组成。这个想法是让一个木偶动物在悬停时弹起，然后当你移动鼠标离开时再次弹回(这是为儿童托儿所准备的)……
您可以在这里看到我在有限的时间内尝试的内容：
下面是我使用的代码示例：
<div id="foo">
<a href="mysite.com"
onMouseOver="document.images['tiger'].src='http://mysite.com/early/wp-content/themes/new/images/tigerup.gif'"
onMouseOut="document.images['tiger'].src='http://mysite.com/early/wp-content/themes/new/images/tigerdown.gif'"
onFocus="if(this.blur)this.blur()">
<img src="http://mysite.com/early/wp-content/themes/new/images/tigerdown.gif" name="tiger" border="0"> </a>
虽然它确实可以工作，但它并不像我想要的那样可靠。有时mouseover事件不能触发第一个gif动画，所以任何改善效果的想法都会非常感谢-谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-07-05 00:15:15
这归功于Mark Kramer的解决方案- Stop a gif animation onload, on mouseover start the activation。
<script type="text/javascript">
$(document).ready(function()
{
$("#imgAnimate1").hover(
function()
{
$(this).attr("src", "/images/tigerup.gif");
},
function()
{
$(this).attr("src", "/images/tigerdown.gif");
});
});
</script>然后像这样添加图像：
<img id="imgAnimate1" src="/images/tigerdown.gif" alt="" >页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17044575
复制相关文章
相似问题
腾讯云开发者
