5

我正在寻找使用 jQuery 来消除使用 GIF 创建一个相当简单的动画的需要。

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

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

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

我对此进行了一些思考。不只使用 GIF 是愚蠢的吗？或者这可以用jQuery来完成吗？

4

6 回答 6

3

这更容易并保持链式能力：

查询：

$(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);
于 2011-03-11T14:37:46.897 回答
1

查看此页面以获取使用 jquery 进行背景动画的演示，并查看其教程。

思南。

于 2009-10-27T03:53:07.887 回答
0

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

css_background-位置

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

于 2009-10-27T03:40:21.250 回答
0

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

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

于 2009-10-27T03:42:18.277 回答
0

如果它是恒定的而不是事件驱动的，我建议使用 gifs。

If, however, the animation is in response to something happening on the page, or if you only want it to start after everything is loaded, then jquery is probably the way to go.

You should just be able to change the image source (or the position offset if you're using a single image) to change the image. Have a look at some "pause" options in jQuery to delay changes between images.

Untested example (derived from Simon's answer in the link above):

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
于 2009-10-27T03:44:53.350 回答
0

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

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

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

于 2009-10-27T13:10:35.810 回答