jQuery GIF 动画

Question

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

我想要的是一个有四个阶段的图像。 1）没有显示任何内容 2）图像的第一部分 3）图像的第二部分 4）图像的第三部分 - 重新开始

我想我需要创建图像阶段，然后使用 jQuery 的“用下一个图像替换当前图像”技术来创建动画。通过回调，这可能非常容易。

下一部分是在上一个动画完成加载后让此动画出现在多个位置。再一次，使用回调可以很容易。

我对此有一些想法。不只使用 GIF 是不是很愚蠢？或者这可以用 jQuery 来完成吗？

Answer 1

这更容易并保持链能力：

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);

Answer 2

检查此页面的演示，了解使用 jquery 和 this 查看其教程。

司南。

Answer 3

首先你可以使用几个div的背景放置你需要的图像部分

css_background-position< /a>

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

Answer 4

如果它是恒定的并且不是事件驱动的，我建议使用 gif。

但是，如果动画是响应页面上发生的某些事情，或者您只想在加载所有内容后启动它，那么 jquery 可能是最佳选择。

您应该能够更改图像源（或者如果您使用单个图像，则更改位置偏移）来更改图像。查看 jQuery 中的一些“暂停”选项，以延迟图像之间的更改。

未经测试的示例（源自上面链接中西蒙的回答）：

function chg1() { $('#myimage').attr('src', ''); }
function chg2() { $('#myimage').attr('src', 'image1src.jpg'); }
function chg3() { $('#myimage').attr('src', 'image2src.jpg'); }
function chg4() { $('#myimage').attr('src', 'image3src.jpg'); }

function StartAnimation() {
    setTimeout(chg1, 2000);  // blank after 2 seconds
    setTimeout(chg2, 4000);  // img 1 after 4 seconds
    setTimeout(chg3, 6000);  // img 2 after 6 seconds
    setTimeout(chg4, 8000);  // img 3 after 8 seconds
    setTimeout(StartAnimation, 8000);  // start again after 8 seconds
}

StartAnimation();  // start it off

Answer 5

使用动画 GIF - 这就是它们的用途。我确信可以使用 JQuery 组合出一个解决方案，但您会付出增加开发时间和复杂性的代价。

此外，您应该认识到，通过使用定制的 JQuery/CSS 解决方案，您正在决定将动画与其所在的页面紧密耦合。如果有人想将动画包含在不同的页面上怎么办？他们必须复制一堆代码而不是单个 GIF 文件。如果有人想将其包含在电子邮件或 Power-point 演示文稿中怎么办？做不到...

Answer 6

是否可以将您的四个图像组合成一个精灵（1 个真实图形，包含所有四个图像且不重叠）？从性能的角度来看，客户端浏览器只需下载单个图像，而不必为四个图像中的每个图像发出 4 个请求。

创建动画就像使用 Damovisa 上面建议的技术一样简单，只需使用一些块元素，将这个单个图像设置为背景并将元素的大小设置为单个图像的一个“图块”的大小，并更改背景位置 css 属性。我对此并不完全确定（如果我错了，请纠正我），但移动背景图像似乎比实际交换四个不同的图像更便宜。

就可移植性和可重用性而言，您只需创建一个 jQuery 插件即可在多个地方使用它。