3044am姘稿埄(闆嗗洟)绉戞妧鏈夐檺鍏徃 - 鐧惧害鐧剧

首页 > 网站建设中，Jquery版页面载入loading提示效果

网站建设中，Jquery版页面载入loading提示效果

时间：2014/10/10 20:16:39 作者：tsccwl 人气：标签：页面加载 jquery页面加载

　　

网站建设中，Jquery版页面载入loading提示效果

这个loading提示效果是从LaoZhuHome上拿来的。

修改之后应用到了pjblog上，相对于之前的load载入效果更佳，

故放弃了之前的“页面载入中……”提示，而采用了您现在所看到的效果。
实现原理就是先让loading图片最先显示，

当页面加载完毕的时候用JS控制loading图片消失，基于jquery实现。

具体修改方法如下：

代码如下

请注意包含jquery 百度运行库

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
    $("#loading").hide();
})
</script>
 <link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css"> <style type="text/css">
#loading{
position:absolute;
width:300px;
top:0px;
left:50%;
margin-left:-150px;
text-align:center;
padding:7px 0 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
}
</style>


<div id="loading">Loading content, please wait.. <img alt="loading.." src="loading.gif" mce_src="loading.gif" /> </div>
<div id="lanrenzhijia">
<ul id="lanren_nav" class="jd_menu" style="font-size:18px;font-weight:bold;color:#ff0;text-align:center;line-height:31px;">阿萨范德萨地方 </ul>
</div>
 

<div style="height:1500px;background:#ccc;padding-bottom:10px;text-align:center;padding-top:10px;padding-left:10px;margin:0px auto;padding-right:10px;width:100%;">阿斯发达 </div>
 

<div style="height:50px;background:#000;position:fixed;color:#ff0;padding-bottom:10px;text-align:center;padding-top:10px;padding-left:10px;margin:0px auto;padding-right:10px;width:100%;bottom:0px;">阿斯发达</div>

提示：复制和保存代码功能在FF下无效。

上一篇：唐山网络公司十一国庆节放假通知
下一篇：十一小长假百度浏览器抢小米超过万余台

地址：中国.唐山市路北区尚座即理工大学对面中国.河北唐山遵化市唐山做网站
本站网址：www.tswzsj.com联系电话：0315-6025099 建站热线：15031560143

唐山网站建设报价咨询

网站售前售后服务

冀ICP备12014317号-1 版权所有:唐山长城网络 www.tswzsj.com