页面载入中……

分类：折腾日期：2011-06-21 - 21:34:35作者：老谢

现在感谢@无冷大湿的帮忙，我的页面加载效果搞定了…

首先在header.php加入两个代码

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"><!--mce:0--></script>
<script src="&lt;?php bloginfo('stylesheet_directory'); ?&gt;/js/load_page.js" type="text/javascript"><!--mce:1--></script>

load_page.js的代码

jQuery(document).ready(function($){
$('.title h2').one("click",function(){
        var Url=$(this).find('a').attr('href');
        $(this).empty().append('<span>页</span><span>面</span><span>载</span><span>入</span><span>中</span><span>·</span><span>·</span><span>·</span><span>·</span><span>·</span><span>·</span>');
        load_ani();
        setInterval(load_ani,1200);
        window.location = Url;
        return false;
    })
    function load_ani(){
        var FUNC=[
            function(){$('.title h2').children('span').eq(0).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(1).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(2).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(3).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(4).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(5).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(6).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(7).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(8).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(9).delay(100).show(0,aniCallBack);},
            function(){$('.title h2').children('span').eq(10).delay(100).show(0,aniCallBack);},
            function(){$('.title h2 span').hide(0);}
        ];
        var aniCallBack=function() {
            $(document).dequeue("ani_list");
        }
        $(document).queue("ani_list",FUNC);
        aniCallBack();
    }
})

css里面加入

.post-title span{display:none;}

完事大吉了，啥也不说了，非常感谢无冷大湿。。！

ps:为了使效果更完美，@无冷给建议给title定义高度，css样式如下：

.title{height:24px}
.post .title h2 {height:24px}

<h1>这是一级标题</h1> 效果相当于30像素的粗体字

<h2>这是二级标题</h2> 效果相当于24像素的粗体字

<h3>这是三级标题</h3> 效果相当于18像素的粗体字

<h4>这是四级标题</h4> 效果相当于16像素的粗体字

<h5>这是五级标题</h5> 效果相当于13像素的粗体字

<h6>这是六级标题</h6> 效果相当于10像素的粗体字

原文地址 : https://www.xj123.info/1474.html

本站遵循 : 署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5)

Tags: 页面加载中……

12条评论

言冬说：

沙发不解释

POST:2011-06-21 22:03 回复
Shit Jim 说：

@无冷大湿也是活雷锋啊

POST:2011-06-21 22:04 回复
郎中中说：

我顶一个！~

POST:2011-06-21 22:17 回复
空空裤兜说：

反复看下效果

POST:2011-06-21 22:22 回复
独角鲸说：

支持。。好漂亮。。

POST:2011-06-22 08:51 回复
Demon 说：

我沒看到效果呢。

POST:2011-06-22 09:46 回复
- 老谢说：
  
  @Demon 从首页点击文章标题就能看到效果了
  
  POST:2011-06-22 20:01 回复
邓肯说：

无冷技术是很强大地

POST:2011-06-22 11:37 回复
公子说：

收藏了~

POST:2011-06-22 23:12 回复
张扬扬说：

这个加上效果不错啊

POST:2011-06-23 14:53 回复
蛋蛋啦说：

你丫最近在忙着搞技术。

POST:2011-06-25 09:58 回复
- 老谢说：
  
  @蛋蛋啦我是瞎折腾
  
  POST:2011-06-25 18:54 回复