重新创建新的 Apple 产品浏览器

发布于 2024-12-11 10:33:04 字数 2589 浏览 0 评论 0 原文

我一直致力于重新创建苹果的新产品浏览器,如他们的 maciPod 页面。

到目前为止我已经做到了 http://jsfiddle.net/xvzjY/3/

问题是我无法让 1 x 1 元素以与进入的方式相同的方式退出。我已经删除了我编写的尝试模拟此代码的代码,因为它干扰了入口函数。任何人都可以弄清楚如何使其尽可能真实。

$(document).ready(function(){
    var bounceholder = 0;
    var delayact = 0;
    $('.bouncetabs a').click(function(){
        $('.bouncetabs a').removeClass('active');
        $(this).addClass('active');

        if($(this).index('.bouncetabs a') < bounceholder) { var backwards = 1 }
        else { var backwards = 0 }

        bounceholder = $(this).index('.bouncetabs a');
        var bounceoffset = 0;

        if($('.bounceholder ul:eq(' + bounceholder + ') li').length == 6){ var bounceoffset = 0;}
        else if($('.bounceholder ul:eq(' + bounceholder + ') li').length == 5){ var bounceoffset = 72;}
        else if($('.bounceholder ul:eq(' + bounceholder + ') li').length == 4){ var bounceoffset = 144;}
        else if($('.bounceholder ul:eq(' + bounceholder + ') li').length == 3){ var bounceoffset = 216;}
        else if($('.bounceholder ul:eq(' + bounceholder + ') li').length == 2){ var bounceoffset = 288;}

        $('.bounceholder ul:eq(' + bounceholder + ')').prevAll().each(function(i) {
            $('li', this).delay(150).animate({left: -200, top:0, opacity:0, leaveTransforms:true}, 600);
        });
        $('.bounceholder ul:eq(' + bounceholder + ')').nextAll().each(function(i){
            $('li', this).delay(150).animate({left: +1000, top:0, opacity:0, leaveTransforms:true}, 600);
        });

            if(backwards == 1) {
                bounceoffset = 800 - bounceoffset;
                $($('.bounceholder ul:eq(' + bounceholder + ') li').get().reverse()).each(function(i){
                  delay = (i + 1) * 250;
                  $(this).delay(delay).animate({left: bounceoffset, top:0, opacity:0.6, leaveTransforms:true}, {duration:400, queue:true});
                  bounceoffset -= 160;
                });
            }
            else {
                $('.bounceholder ul:eq(' + bounceholder + ') li').each(function(i){
                  delay = (i + 1) * (250 * delayact);
                  $(this).delay(delay).animate({left: bounceoffset, top:0, opacity:0.6, leaveTransforms:true}, {duration:400, queue:true});
                  bounceoffset += 160;
                });
            }
            delayact = 1;

    return false
    });

});

I have been working on recreating apple's new product browser as seen on their mac and iPod pages.

So far I have got this far http://jsfiddle.net/xvzjY/3/

The problem is I cannot get the 1 by 1 element exiting in the same way they enter. I have removed the code I wrote to try and emulate this as it interfered with the entry function. Can anyone figure out how to make this as authentic as possible.

$(document).ready(function(){
    var bounceholder = 0;
    var delayact = 0;
    $('.bouncetabs a').click(function(){
        $('.bouncetabs a').removeClass('active');
        $(this).addClass('active');

        if($(this).index('.bouncetabs a') < bounceholder) { var backwards = 1 }
        else { var backwards = 0 }

        bounceholder = $(this).index('.bouncetabs a');
        var bounceoffset = 0;

        if($('.bounceholder ul:eq(' + bounceholder + ') li').length == 6){ var bounceoffset = 0;}
        else if($('.bounceholder ul:eq(' + bounceholder + ') li').length == 5){ var bounceoffset = 72;}
        else if($('.bounceholder ul:eq(' + bounceholder + ') li').length == 4){ var bounceoffset = 144;}
        else if($('.bounceholder ul:eq(' + bounceholder + ') li').length == 3){ var bounceoffset = 216;}
        else if($('.bounceholder ul:eq(' + bounceholder + ') li').length == 2){ var bounceoffset = 288;}

        $('.bounceholder ul:eq(' + bounceholder + ')').prevAll().each(function(i) {
            $('li', this).delay(150).animate({left: -200, top:0, opacity:0, leaveTransforms:true}, 600);
        });
        $('.bounceholder ul:eq(' + bounceholder + ')').nextAll().each(function(i){
            $('li', this).delay(150).animate({left: +1000, top:0, opacity:0, leaveTransforms:true}, 600);
        });

            if(backwards == 1) {
                bounceoffset = 800 - bounceoffset;
                $($('.bounceholder ul:eq(' + bounceholder + ') li').get().reverse()).each(function(i){
                  delay = (i + 1) * 250;
                  $(this).delay(delay).animate({left: bounceoffset, top:0, opacity:0.6, leaveTransforms:true}, {duration:400, queue:true});
                  bounceoffset -= 160;
                });
            }
            else {
                $('.bounceholder ul:eq(' + bounceholder + ') li').each(function(i){
                  delay = (i + 1) * (250 * delayact);
                  $(this).delay(delay).animate({left: bounceoffset, top:0, opacity:0.6, leaveTransforms:true}, {duration:400, queue:true});
                  bounceoffset += 160;
                });
            }
            delayact = 1;

    return false
    });

});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文