Question

我正试图设置一个“页面加载”＃39;在页面加载时显示全屏的div，然后在文档准备就绪时淡出。

我这样工作很好......

/*HTML*/
<div id="splash">Content</div>

/*CSS*/
#splash {
    background: url("http://localhost/images/loader.gif") no-repeat scroll center center #fff;
    position: absolute;
    z-index:100000000;
    height: 100%;
    width: 100%;
}

/*jQUERY*/

<script type="text/javascript">
$(window).load(function(){
    $('#splash').fadeOut(800);
    $('body').css('overflow','auto');
});
</script>

上面的设置主要在我的加载网站顶部显示一个动画图形，然后在网站完全加载时淡出。这里没有问题。

我需要什么 我希望div只能在每个会话中显示一次（以避免在从网站上的任何其他页面导航回主页时显示）

我不介意使用cookie或html5本地存储方法。我只是花了好几个小时试图拼凑现有代码并失败，因为我对jQuery的理解是垃圾。

非常感谢

Answer 1

我做了一些jsfiddling：http://jsfiddle.net/jf1yzLeg/1/

您必须确保包含一些cookie库，因为它不是默认的jquery功能。我用了：http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js

然后你可以使用类似的东西：

var cexists = $.cookie('cookie');

if (!cexists) {
    alert('will create cookie');

    $('#cexists').fadeOut(2000); // fade the other
    $.cookie('cookie', 'true', {
        expires: 1 // day
    });
} else {
    alert('cookie exists');
    $('#ncexists').fadeOut(2000); // fade the other
}

页面加载div每个会话显示一次，并在加载页面时淡出

1 个答案: