分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress添加页面过渡效果
+

WordPress添加页面过渡效果

WordPress添加页面过渡效果-BanYuner

最近比较关注WordPress方面的代码,所以更新的比较频繁,还请大家谅解。这次依然是来自知更鸟博客的代码,主要内容是为了页面提供一个过渡的动画,就像上面的。当然,图片方面大家可以自己修改,我是懒得改了,所以随便的弄了一下。

那么我就直接附上相关代码了:

引入JS

外链格式

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

外链格式中的js可以自己寻找更好的进行替换。

内链格式

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>

添加JS代码

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

上面的代码直接添加到之前即可。

添加效果代码

<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;" onclick="javascript:turnoff('loading')">
<p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:50px 0 0 -50px; padding:3px 10px;" onclick="javascript:turnoff('loading')">页面载入中,请稍后...</p>
</div>

其实这个功能还可以继续扩展一下,大家可以发挥自己的想象了。

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
WordPress添加页面过渡效果
支付宝(点击图片切换)
扫码,支持我
WordPress添加页面过渡效果
微信(点击图片切换)
扫码,手机看
WordPress添加页面过渡效果
匿名

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

相关推荐

  • WordPress修改默认的头像图标

    WordPress修改默认的头像图标

    随着越来越多人使用WordPress,但是很多用户不会修改自己站点的默认WordPress图标,就会跟我的站点一样,看上去非常不美观, ...

    点击查看
  • WordPress简易集成Markdown教程

    WordPress简易集成Markdown教程

    今天首先在群里面看到一个用户询问是否有方法将Markdown集成到主题里面去,后来我一想,这个所谓的Markdown确实是很多人提到 ...

    点击查看
  • WordPress制作简易年度总结页面

    WordPress制作简易年度总结页面

    今天早些时候已经制作一个类似112博客导航的页面,具体可以详见:

    点击查看
  • WordPress通过短代码显示指定文章内容

    WordPress通过短代码显示指定文章内容

    今天在一个WordPress交流群里面看到一个群友问一个问题,我个人方面也是很感兴趣,这个问题就是如何通过“新建文章栏输入链接 ...

    点击查看
  • 禁用WordPress 4.7版本的PDF预览功能

    禁用WordPress 4.7版本的PDF预览功能

    之前的文章我们也介绍了,关于WordPress 4.7版本中,新增了一个预览PDF的功能,详见:

    点击查看
  • WordPress获取文章的第一张图片并且显示

    WordPress获取文章的第一张图片并且显示

    关于这类的文章我们已经介绍过两种方法了,两种方法都不一样,但是适合自己的才是最好的,虽然今天我要介绍的方法可能不适合 ...

    点击查看
WordPress添加页面过渡效果
2 + 8 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)