为网站添加页面加载特效

nimaboke 2014-8-18 4037

大家看自己的博客页面加载感觉很空洞，但看到别的网站弄的有加载特效是不是很羡慕啊？不用羡慕，接下来晓编给大家一个通用的实现加载特效的方法

搜狗截图20140817232754.png

第一步要加载jq，基本上网站都自带jq了，所以晓编省略了这部（见谅见谅）好吧，还是忍痛给大家放出代码：

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

这是谷歌的jq，大家可以换成360的

然后呢，我们要在</head>前添加一段JS代码

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

当然了那一段文字你是随便更改的，然后最后一步：在<body>后添加显示效果样式

<div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(http://nimaboke.qiniudn.com/ing.gif) 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>

http://nimaboke.qiniudn.com/ing.gif可以随意更换成你喜欢的加载图片


李明 评论：
谢谢忍痛分享代码。
穿越网 评论：
厉害！学习了！
幻?あ?璃 评论：
thanks（必须有中文吗？）
php程序员 评论：
加载的效果对于用户的体验度很好。
sunnyhall 评论：
页面加载特效可以带来不错的用户体验
吴尼玛 评论：
@幻?あ?璃：?(?ε?)?为了确认你不是基佬
动漫资讯 评论：
恩，这个加载效果不错的
厦门品讯科技 评论：
厉害啊 来学习一下
boke123 评论：
最好是能秒开
幻?あ?璃 评论：
@吴尼玛：额，好吧……
灰常记忆 评论：
哈哈，不折腾~
MM迅雷号 评论：
我也在用啊，而且主题也是一样的呵呵
大球磨机 评论：
一个可以回复所有问题的一句话～亲，百度一下，你就知道哦
选矿设备 评论：
O my God ，写的太好了，值得赞一个.....
精煤烘干机 评论：
不错，大开眼见啊，原来是这样啊
球磨机衬板 评论：
第一次评论啊，好紧张啊，该怎么说啊，打多少字才显的有文采啊，这样说好不好啊，会不会成热贴啊，我写的这么好会不会太招遥
烘干机 评论：
一次次的拜访，楼主感受的肯定是幸福甜甜滴........
收藏的用户（0） X
正在加载信息~
最新回复 (0)
返回
发新帖