0

有一个关于 jQuery 页面转换的非常直接的问题。我想复制我的 Mac 从启动到显示桌面时所做的转换。我想为此使用jQuery。有没有人偶然发现了一些冷酷的资源来帮助我重定向？

您可以在此处观看有关我正在寻找的过渡的视频：http ://www.youtube.com/watch?v=-I9F4JswFXI

4

2 回答 2

0

这是使用 CSS3 过渡，但会为其他浏览器优雅地回退。基本上我们设置了一个完整的页面包装 div 并使其不可见且略小。然后，当我们制定.show类时，它将过渡到全尺寸和全不透明度。

然后我们在页面加载时触发这个，你应该几乎和狮子一样。:)

CSS

#fullPageWrapper{
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -o-transform:scale(0.8);
    transform:scale(0.8);
    opacity:0;
}

#fullPageWrapper.show{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
    opacity:1;
}

jQuery

$(function(){
     $(window).on('load', function(){
          setTimeout(function(){
              $('#fullPageWrapper').addClass('show');
          },16);         
     });
});
于 2012-06-07T20:11:36.920 回答
0

不知道可用的资源。但是您可以使用 jQuery Fade（用于隐藏启动屏幕）、Load（用于使用 AJAX 加载图像内容）和 Zoom（用于在启动时放大图像）来创建它。

这些链接将帮助您：

http://api.jquery.com/fadeOut/

http://api.jquery.com/load/

如何使用 jQuery 在页面加载时放大 div？

于 2012-06-07T20:11:51.570 回答