Question

基本上我被要求在显示页面之前制作一个带有徽标图像的网站（例如4秒显示）。

从我可以看到，最好的方法是使用jQuery。我已经看到了在加载所有图像后页面淡入的示例，但是如何通过指定时间量来完成此操作。

总结：

想要全屏加载图片，加载页面稍微可见（灯箱效果），然后在4秒后淡入完全加载的网站内容，无论页面是否加载。

我该怎么做？

Answer 1

使用setTimeout延迟并致电fadeIn和fadeOut

试试这个

$(window).load(function(){
   $('#imageID').fadeIn('slow',function(){
         setTimeout(function(){
            $(this).fadeOut('slow') // $('#imageID')".fadeOut('slow',
         },4000);
   })
});

您可以使用模态显示灯箱效果等徽标...并打开和关闭谎言......

模态的链接..

simple modal
jquery dialog with true

Answer 2

您可以使用div标签启动页面，该标记位于页面上，具有100％的宽度和高度，然后使用jquery来设置＆＃34;动画＆＃34;这个div的不透明度，直到你到达你几乎看不到的地方，然后你隐藏div。

<html>
  ..... header content where javascript and what not goes
  <body>
    <div id='introdiv' style="position:absolute;z-index:9999;width:100%;height:100%;">
      .... image goes here
    </div>
    .... other page content goes here.

使用jQuery Animate，你只需要$（＆＃34;＃introdiv＆＃34;）。animate（{......

您必须找到一种方法来确保div标签在每个其他请求中都隐藏，否则您的图像会在每次显示时显示。

如果要在页面加载之前显示图像，请将animate放在jQuery的document.ready函数中。

在加载时将图像淡入页面

2 个答案: