首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQuery GIF动画

jQuery GIF动画
EN

Stack Overflow用户
提问于 2009-10-27 11:13:06
回答 6查看 11.8K关注 0票数 5

我希望使用jQuery来消除使用GIF来创建一个相当简单的动画的需要。

我想要的是一个有四个阶段的图像。1)没有显示2)图像的第一部分3)图像的第二部分4)图像的第三部分-从头开始

我在想,我需要创建图像阶段,然后使用jQuery的“用下一个图像替换当前图像”技术来创建动画。使用回调可以很容易做到这一点。

下一部分是在前一个动画完成加载后,让这个动画出现在几个地方。再说一次,使用回调可能很容易。

我正在寻找一些关于这个的想法。不使用GIF是不是很愚蠢?或者,这可以用jQuery完成吗?

EN

回答 6

Stack Overflow用户

发布于 2011-03-11 22:37:47

这要容易得多,并保持了链式能力:

JQuery:

代码语言:javascript
代码运行次数:0
运行
复制
$(document).ready(function(){
    //rotator - delay, children
    $('#slideshow').rotator(50, 'img');
});

标记:

代码语言:javascript
代码运行次数:0
运行
复制
<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>

插件:

代码语言:javascript
代码运行次数:0
运行
复制
(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);
票数 3
EN

Stack Overflow用户

发布于 2009-10-27 11:53:08

查看this page for a demo获取jquery的背景动画,查看this获取其教程。

西南。

票数 1
EN

Stack Overflow用户

发布于 2009-10-27 11:40:21

首先你可以使用几个div的背景,把你需要的那部分图片

css_background-position

然后,您必须根据您需要的动画类型显示需要显示的div。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1628576

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档