找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2299|回复: 0

[分享] 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的话是不理智的选择。

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-24 12:18 , Processed in 0.047279 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表