分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:站点开启被动注册模式,详情点击这里了解
 您目前所在位置: 站点首页 » WordPress » 代码 » WordPress添加页面过渡效果
+

WordPress添加页面过渡效果

  • 引入JS
  • 添加JS代码
  • 添加效果代码
  • 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评论内容中添加字数限...

      点击查看
    • Giphypress-WordPress文章内容中添加GIF图片

      Giphypress-WordPress文章内容中添加GIF图片

      看了标题之后,千万不要关闭这个页面,因为这个页面里面的内容可能跟你了解的不一样。 我们都知道 WordPress 可以通过添加媒体来上传 G...

      点击查看
    • 如何自定义WordPress登陆页面背景

      如何自定义WordPress登陆页面背景

      这个功能是一个小功能,但是就我了解到的,目前还是有很大一部分主题都是使用的了这个功能的,所以这里还是简单的介绍一下实现方法。 首先我们看到登...

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