老谢博客

  • 首页
  • WordPress
  • 网络技术
  • 乱七八糟
  • 运维技术
  • 给我留言
  • 关于老谢

页面载入中……

分类:折腾日期: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>

<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();
    }
})

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;}

.post-title span{display:none;}

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

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

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

.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: 页面加载中……
  • 上一篇:wordpress读者墙血条版-感谢无冷大湿
  • 下一篇:静态路由&默认路由试验笔记
12条评论
  1. 言冬 说:

    沙发不解释

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

    @无冷大湿 也是活雷锋啊

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

    我顶一个!~

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

    反复看下效果

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

    支持。。好漂亮。。

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

    我沒看到效果呢。

    POST:2011-06-22 09:46 回复
    • 老谢 说:

      @Demon 从首页点击文章标题就能看到效果了

      POST:2011-06-22 20:01 回复
  7. 邓肯 说:

    无冷技术是很强大地

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

    收藏了~

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

    这个加上效果不错啊

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

    你丫最近在忙着搞技术。

    POST:2011-06-25 09:58 回复
    • 老谢 说:

      @蛋蛋啦 我是瞎折腾

      POST:2011-06-25 18:54 回复
发表评论 点击取消评论.

*必填

*必填

  • 文章归档
  • 子网计算
  • 我的共享
  • 锻炼计划
  • 给我留言
  • 关于老谢
2023年 5月
一 二 三 四 五 六 日
1234567
891011121314
15161718192021
22232425262728
293031  
« 4月    

最新文章

  • 装台1600元办公主机
  • 2021好久没更新博客
  • Zabbix监控oxidized备份状态
  • Zabbix 5.0 LTS版本MySQL表分区及编译安装随记
  • centos7.9部署oxidized自动备份交换机配置
  • Surface Pro 4更换屏幕与电池
  • VCSA中删除horizon view链接克隆生成的replica-受保护副本
  • Esxi6.7U3安装SanDisk Fusion-io 1.3T ioscale Pci SSD加速卡驱动
  • 搭建ELK日志系统分析处理fortigate的syslog日志
  • 华为USG防火墙配置NAT映射回流解决内网通过公网映射访问内部服务器

最新评论

  • 王光卫博客:以前也喜欢DIY现在玩不动了
  • 大D:大佬!
  • Sirit:够用就好,不过现在的电子产品是真的...
  • 美樂地:我也想买个mini PC,打算等下一代的...
  • Mr.Chou:老牌子又不用带独显够用的,如换是...
  • 小熊:评论区全是大佬,就我完全不太懂。
  • 老俍:真是巧了,我也想给苏菲4pro换电池呢,...
  • 空空裤兜:all in one的小主机都有两千的了。...
  • Pampo:1600组一个12100的不错了,价格压挺低...
  • 无敌风火轮:和索尼没啥关系,这是索尼电脑的...

日志存档

  • 2023年4月
  • 2021年10月
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2020年11月
  • 2020年9月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年12月
  • 2019年10月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年3月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年1月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年7月
  • 2016年6月
  • 2016年4月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年5月
  • 2015年4月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2014年5月
  • 2014年4月
  • 2014年3月
  • 2014年2月
  • 2014年1月
  • 2013年12月
  • 2013年11月
  • 2013年10月
  • 2013年9月
  • 2013年8月
  • 2013年7月
  • 2013年6月
  • 2013年5月
  • 2013年4月
  • 2013年3月
  • 2013年2月
  • 2013年1月
  • 2012年12月
  • 2012年11月
  • 2012年9月
  • 2012年8月
  • 2012年7月
  • 2012年6月
  • 2012年5月
  • 2012年4月
  • 2012年3月
  • 2012年2月
  • 2012年1月
  • 2011年12月
  • 2011年11月
  • 2011年10月
  • 2011年9月
  • 2011年8月
  • 2011年7月
  • 2011年6月
  • 2011年5月
  • 2011年4月
  • 2011年3月
  • 2011年2月
  • 2011年1月
  • 2010年12月
  • 2010年11月
  • 2010年10月
  • 2010年9月
  • 2010年8月
  • 2010年7月

W3C

  • XHTML 1.0 Transitional
  • CSS level 3
  • Google+
Copyright © 2010-2023 老谢博客 All rights reserved.
Gzipped 76.5% | Optimized loading 2 queries in 0.212 seconds | Memory 36.58 MB | 皖ICP备13010663号-1
Powered by WordPress. | Hosted By 腾讯云 | Theme by WordPress主题巴士 | 站点地图 | SiteMap | Uptime | 技术支持:苏州天剑计算机系统有限公司