Question

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

您可以在此处查看我正在寻找的转化视频：http://www.youtube.com/watch?v=-I9F4JswFXI

Answer 1

这是使用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);         
     });
});

Answer 2

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

这些链接可以帮助您：

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

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

How to zoom a div in on page load with jQuery?

OSX Snow Leopard使用jQuery启动屏幕页面转换

2 个答案: