您的位置 » 首页 » emlog折腾 » 给emlog博客加上“页面正在读取中”效果

给emlog博客加上“页面正在读取中”效果

发表于311 天前 | 作者: 搜 | 分类: emlog折腾 | 破蛋日:2010年09月08日 | 流行热度: 热度43°

给emlog“页面添加“正在读取中”效果其实这个效果的原理还是相当的简单的,在在<body>和</body>直接,当读取完毕后效果消失。

  thum 5fdf977f2aa1b38374ba886417fe1b9720100908013758 给emlog博客加上“页面正在读取中”效果

下面是步骤:

在 /content/templates/ 里的模版文件 header.php

找到 <body> 在其下面添加

<div id="loading_">页面正在读取中…</div>
<script type="text/javascript">$("#loading_").show();</script>

然后打开footer.php文件

找到</body> 在其上面添加下列代码

<script type="text/javascript" > setTimeout(function() {
    $("#loading_").animate({
        top: '110px',
        left: '35%',
        opacity: 'hide'
    },
    1000)
},
1000);</script>

接着打开 main.css 添加下列

#loading_{
 color:#FFF;
 font-weight:bold;
 padding:5px 15px;
 background:#000 ;
 z-index:200;
 position:fixed !important;/*important*/
 position:absolute;/*IE */
 float:right;
 top:200px;
 left:45%;
 text-align:center;
 display:none;
 font-size:14px;
 opacity:0.7;
 filter:alpha(opacity=70);
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

 

打开 /lib/js/common_tpl.js  在里面添加

 

$(document).ready(function() {

    $('#container a:not(a[target*=_blank] , a[href*=javascript] , a[href*=#])').click(function() {

        $('#loading_').css({

            top: '200px',

            left: '45%'

        });

        $('#loading_').show()

    })

})

 

最后  在 header.php 加载下 jquery  如果加载过的 可以无视。

<script src="<?php echo BLOG_URL; ?>lib/js/jquery/jquery-1.2.6.js" type="text/javascript"></script>

OK上传搞定收工。

注意: jquery必须比js代码先要加载,不然会导致代码不能正常显示。

文本标签:
本文地址:http://www.gokuc.cn/add-to-emlog-blog-page-is-read-in-effect.html
除非注明,本站所有文章皆为原创,转载请以链接形式标明本文地址

已经有6个伟大的人留下了手印...

  • lisa 说:-0001 年 11 月 30 日 00:00 回复

    谢谢博主的分享,让我又学了点东西。

  • 林西老九 说:-0001 年 11 月 30 日 00:00 回复

    我来了,搜搜搜,搜里格搜

  • 古博 说:-0001 年 11 月 30 日 00:00 回复

    这种东西在06年左右的时候看到比较多,现在有的只是样式变得好看一些了

  • George 说:-0001 年 11 月 30 日 00:00 回复

    谢谢, 不错

  • 朵未 说:-0001 年 11 月 30 日 00:00 回复

    这个效果挺人性化的,支持搜搜。

  • 小松 说:-0001 年 11 月 30 日 00:00 回复

    额…你可以去转wp了~

发表评论

你的大名(必填)

你的邮箱(必填)

你的网站(选填)

评论内容(必填)

/鼓掌 /难过 /阴险 /酷 /调皮 /白眼 /疑问 /擦汗 /撇嘴 /抠鼻 /惊讶 /微笑 /得意 /害羞 /坏笑 /哈欠 /咒骂 /呲牙 /吓 /可爱 /发怒 /发呆 /伤心