jQuery GIF动画
jQuery GIF动画
提问于 2009-10-27 11:13:06
我希望使用jQuery来消除使用GIF来创建一个相当简单的动画的需要。
我想要的是一个有四个阶段的图像。1)没有显示2)图像的第一部分3)图像的第二部分4)图像的第三部分-从头开始
我在想，我需要创建图像阶段，然后使用jQuery的“用下一个图像替换当前图像”技术来创建动画。使用回调可以很容易做到这一点。
下一部分是在前一个动画完成加载后，让这个动画出现在几个地方。再说一次，使用回调可能很容易。
我正在寻找一些关于这个的想法。不使用GIF是不是很愚蠢？或者，这可以用jQuery完成吗？
回答 6
Stack Overflow用户
发布于 2011-03-11 22:37:47
这要容易得多，并保持了链式能力：
JQuery:
$(document).ready(function(){
//rotator - delay, children
$('#slideshow').rotator(50, 'img');
});标记：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="scripts/jquery.rotator.js"></script>
<style type="text/css">
#slideshow {
position:absolute; //or whatever you need
display:block;
top:0px;
left:0px;
}
#slideshow img {
position:absolute;
opacity:0;
}
</style>
<!-- SLIDESHOW -->
<div id="slideshow">
<img src="images/1.png">
<img src="images/2.png">
<img src="images/3.png">
</div>插件：
(function( $ ){
$.fn.rotator = function(delay, child){
//set curImage val
var currImg = 0;
var currIt = true;
//set array of images
var ss = $('#slideshow').children(child);
var ssize = ss.size();
setInterval(function() {
if(currIt){
$(ss[currImg]).css('opacity','1');
currIt = !currIt;
}else if (!currIt){
$(ss[currImg]).css('opacity','0');
$(ss[currImg+1]).css('opacity','1');
currIt = !currIt;
currImg++;
}
//reset
if(currImg >= ssize){
currImg = 0;
$(ss[currImg]).css('opacity','1');
}
}, delay);
return this;
};
})(jQuery);Stack Overflow用户
发布于 2009-10-27 11:53:08
查看this page for a demo获取jquery的背景动画，查看this获取其教程。
西南。
Stack Overflow用户
发布于 2009-10-27 11:40:21
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1628576
复制相关文章
相似问题
腾讯云开发者
