广树
2024-10-10 19:57
@铭心:谢谢大佬夸奖,大佬的博客也很可爱。
关于友链,抱歉,希望能仔细阅读一下友链要求。
作者:广树时间:2016-02-12 21:35:13分类:JavaScript/jQuery/Vue
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>