导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

侧边栏
最新评论
广树管理员
2025-02-18 12:13
@粽叶加米:计划不起来呀
粽叶加米
2025-02-18 12:10
计划一下,让那天变得特别一点(☆ω☆)
广树管理员
2025-02-18 09:13
@菲兹克斯喵:大佬也看过《水星领航员》呢!我也是在学业压力繁重的学生时代看的这部治愈神作,在学生时代能遇到这部作品真好。
菲兹克斯喵
2025-02-18 09:11
我记得上个学期压力最大的时候每天晚上睡前会看一集水星领航员,这部动画真的好治愈~
广树管理员
2025-02-18 08:56
@Zrzzz:没想到大佬也有电磁炮的青春!撤回可以复制编辑原文算是常规操作🤭
正在攻略

logo_kai.jpg


PSN奖杯卡

PSN奖杯卡

赞助商广告

【jQuery】加载完后显示内容

作者:广树时间:2016-02-12 21:35:13分类:JavaScript

    CSS:


.newsloader-bg {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #eee;
	z-index: 1;
}
.newsloader {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-left: -100px;
	text-align: center;
	color: #999;
	z-index: 2;
}
.jpnews-jp, .usanews-en {
	background-color: #FFFFFF;
	border-radius: 10px;
	text-align: center;
	vertical-align: middle;
	-webkit-box-shadow: 0px 0px 6px 0px #333;
	box-shadow: 0px 0px 6px 0px #333;
	width: 780px;
	height: 700px;
	position:relative;
}
.jpnews-jp .close-x, .usanews-en .close-x {
	text-align: right;
	height: 35px;
	padding-top: 15px;
	padding-right: 15px;
	z-index: 3;
	position:relative;
}


    HTML:


<div class="jpnews-jp">
<div class="newsloader-bg">
  <div class="newsloader">
    <img src="http://imgout.ph.126.net/47161134/loading.jpg" height="40" alt="Now Loading..." />
    <p>努力获取中...</p>
  </div>
</div>
<div class="wrap">
<div style="width:780px;height:630px;">
需要显示的正文内容
</div>
</div>
</div>



    JS脚本:

<script>
$(function() {
  $('.newsloader-bg ,.newsloader').css('display','block');
});
 
$(window).load(function () { //全部加载完后执行
  $('.newsloader-bg').delay(900).fadeOut(800);
  $('.newsloader').delay(600).fadeOut(300);
  $('.wrap').css('display', 'block');
});
 
//经过一定时间后如果还未加载完则强制显示内容
$(function(){
  setTimeout('stopload()',240000);/*设置时间*/
});
 
function stopload(){
  $('.wrap').css('display','block');
  $('.newsloader-bg').delay(900).fadeOut(800);
  $('.newsloader').delay(600).fadeOut(300);
}
</script>


donate.png

1210 x 50(蓝底).png

cloudcone