如何在wordpress博客中添加炫酷的加载中动画特效

一个优秀的博客不仅仅要给读者得到想要的知识或内容,也应该给予读者阅读时的享受。因为有些朋友的网速很慢,而博客中的图片等内容挺多的,所以在网页打开时往往需要等半天,如果此时能够显示一个漂亮的入场动画,也许可以缓解等待网页打开的无奈感。今天就来分享一下周叔博客的加载动画特效。
特效的实现并不麻烦,简单来说就是用几个层来遮罩页面,然后在这个层之上添加一个gif动画或者css动画,下面来分享一下具体代码:
1:首先要加载jquery库,如果已经加载过jquery,可以忽略此步骤,我用的wordpress自带的库,加载方法如下:
2:在head中加载css动画特效:
3:在head中加载js控制代码:
jquery(function(){jquery('#loading-one').empty().append('周叔博客载入完成.').parent().fadeout('slow');jquery('#loading').click(function(){jquery('#loading').fadeout('slow');});});
4:最后在body的顶部添加如下代码:
周叔移动电源博客载入中...
在这里我要强调一点,第4步的html代码最好用javascript封装输出,因为如果不用javascript输出,百度蜘蛛会将p标签内的文字抓取到快照中。如何通过javascript输出,大家可以直接查看我的博客源代码,非常简单的东西这里,就不再赘述了。另外,如果发现按照我的步骤不能实现特效,也请自行打开周叔博客的网页源码对比一下,可能是css在格式化的时候除了问题,因为在周叔博客css上是压缩过的,你可以自行复制一下。
移动电源本文来自:移动电源什么牌子好|移动电源哪个牌子好|手机移动电源-周叔博客本文链接:http://www.zhss.net/wordpress-loading-