ZBLOG实现Loading图片加载特效

一次就够 · 发表于 2013-7-10 22:27:45

很多网站都会打开加载的时候有个loading...的图片，虽然没有什么实际的意义但是对于提高访客的体验还是不错的！如何做呢？很简单我们分三步来实现

1：首先要加载jquery.min.js

外链格式为

<script type="text/javascript" src="http://jqueryjs.Googlecode.com/files/jquery-1.2.3.min.js"></script>

内链格式为

<script type="text/javascript" src="="<#ZC_BLOG_HOST#>script/jquery.min.js" ></script>

2：在主题模板</head>前加上以下JS代码

<script type="text/javascript">
jQuery(function(){
jQuery('#loading-one').empty().append('页面加载完毕.').parent().fadeOut('slow');
});</script>

3：在主题模板<body>后加入以下代码

<div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(这里输入一个图片地址) no-repeat center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;">
<p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:50px 0 0 -50px; padding:3px 10px;">页面载入中,请稍后...</p>
</div>

加载图片的格式与大小不限。在baidu图片中搜索Loading很多类似的图片。不过需要注意的是如果你的服务器和我一样访问速度慢的话单纯为了特效而加载jquery的话是不理智的选择。

		自动登录	找回密码
密码			立即注册

[分享] ZBLOG实现Loading图片加载特效

站长推荐 /1