我wana制作下面的gif最初停止但开始播放时悬停,当mouSEOut它将停止…任何人都可以帮助我?
解决方法
在你的情况下,因为动画并不复杂,我的想法是在页面上放置两个图像(动画而不是动画).并在鼠标上/外显示/隐藏它们.
<div id="img_wrap" class="static"> <img id="animated" src="animated.gif" alt=""> <img id="static" src="static.jpg" alt=""> </div>
脚本:
$(function(){ $('#img_wrap').on( 'mouseenter',function() { $(this).toggleClass('animated','static'); }) })
CSS:
.animated #static,.static #animated { display: none; } .animated #animated,.static #static { display: inline; }
或者你甚至可以使用普通的CSS做到这一点,如果你不需要IE6的支持,除了< a>之外不会触发任何事情的悬停事件:
CSS:
#img_wrap #static,#img_wrap:hover #animated { display: inline; } #img_wrap #animated,#img_wrap:hover #static { display: none; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。