JQUERY页面载入效果特效

昨天逛 木木的博客时就看到了这个效果。以前自己使用emlog博客时也添加过一次。但是那次的没有这个好看。就查看 木木的源代码,可是屏蔽了右键,最后看到了代码,但是修改之后没有成功。就百哥了下,最后看到 糖醋排骨 站上写的一个教程,就倒弄了下,开始也是没有成功,就一直停留在加载,没有返回值 ,最后检查了才知道因为自己使用了一个图片延迟加载语句,这条语句添加到它的后面。所有一直停留在加载页面! 好。废话不多说。来给代码和修改办法!

 1.前提自己已调用jquery库。如果没有点这里下载   jquery库

2..在自己模板header.php中调用jquery,现在再新建一个JS文件,如loading.js!

 然后头部代码调用如:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="<?php $this->options->themeUrl('/images/loading.js'); ?>"></script>

3.还是在header.php中找到body这个地方添加下面CSS

<body style="height:100%; width:100%; position:relative;">
<div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(http://interjc.googlecode.com/svn/trunk/waterfall/img/load.gif) no-repeat center 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:20px 0 0 -50px; padding:3px 10px;">页面载入中..</p>
</div>

注意:background:#000 url(http://interjc.googlecode.com/svn/trunk/waterfall/img/load.gif) 内的这个图片最好是保存在自己服务器上,这样可以加快加载速度!

4.打开刚刚新建的loading.js在里面写入,注意保存格式为UTF8格式,

//载入中 Loding..
jQuery(function(){
  jQuery('#loading-one').empty().append('页面载入完毕.').parent().fadeOut('slow');
});

最后把改好的文件上传到自己博客的模板文件夹下就OK了。你也可以在后台修改头部模板header.php,把loading.js上传就OK了

大家也可以移步到 糖醋排骨这里查看他 的教程,因为本人就是在这个教程上修改成功的!  传送门

本文修改方法来自 糖醋排骨 http://interjc.net/archives/2010/01/01/jquery-loding-effect.html

相关文章

已有 10 条评论
  1. 透视装

    第一次评论啊,好紧张啊!

    透视装 回复
  2. interjc

    哈哈,这个评论显示好梦幻{smile:14}

    interjc 回复
    1. Pharmg879

      @interjc

      Very nice site!

      Pharmg879 回复
    2. Pharme154

      @interjc

      Hello! ceeebda interesting ceeebda site! I'm really like it! Very, very ceeebda good!

      Pharme154 回复
    3. 枫叶红秋雨

      @interjc

      @interjc 额。梦幻。。哈哈

      枫叶红秋雨 回复
      1. Pharme992

        @枫叶红秋雨

        Hello! kakeedd interesting kakeedd site! I'm really like it! Very, very kakeedd good!

        Pharme992 回复
  3. Utaoy

    侧栏那块 某某人的足迹 我觉的很好

    Utaoy 回复
    1. 枫叶红秋雨

      @Utaoy

      @Utaoy
      这个是万戈那弄来的好像。你去他那看看。好像有这个插件!

      枫叶红秋雨 回复
      1. Pharmd47

        @枫叶红秋雨

        Very nice site!

        Pharmd47 回复
      2. Pharma566

        @枫叶红秋雨

        Hello! eeefeea interesting eeefeea site! I'm really like it! Very, very eeefeea good!

        Pharma566 回复
发表新评论