页面载入中… …

若直接通过此文章的链接进来的,建议返回首页点击“文章标题”“接着看”,体验体验此文所讲的效果~

结合去年分享的《首页文章伸缩新方式新代码》中的代码,讲讲如何添加这个小效果。

HTML结构还是有必要先放出来,主要看层级结构:

 
<div id="post-<?php the_ID(); ?>" class="post-home">
 
	<div class="post-title"><h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2></div>
 
	<div class="post-content"><?php the_content(__('接着看')); ?></div>
 
</div>

jQuery核心代码:

 
//By ImMmMm.com
 
$('.post-title h2').click(function(){//点击class="post-title"元素内的h2,即文章标题
 
	$(this).find('a').html('页面载入中<span>.</span><span>.</span><span>.</span> <span>.</span><span>.</span><span>.</span>');//更改所点击的文章标题,后面6个点先用CSS隐藏
 
	for(i=0;i<=6;i++){//For循环6次
 
		$(this).children('span').eq(i).delay(i+'99').show(0);//让标题内的span一个一个相隔不同时间显示出来
 
	}
 
	window.location = $(this).find('a').attr('href');//取得标题链接并打开,不写此句Opera下页面不会跳转
 
	return false;//阻止默认点击事件
 
});

要添加的CSS:

 
.post-title span{display:none;}

关于For循环含义可查看文档了解:http://www.w3school.com.cn/js/js_loop_for.asp

若不用for那jQuery得这么写,开始测试时我就是这么写的:

 
$(this).children('span').eq(0).delay(100).show(0).next().delay(200).show(0).next().delay(300).show(0).next().delay(400).show(0).next().delay(500).show(0).next().delay(600).show(0);//啥子状况,卖串串?

由于delay()是jQuery1.4+的属性,So~

另外,Opera下是直接跳转的……

PS:刚更新JS,还加了一句小代码,有童鞋发现了吗?

主机格调
  1. TyTN
    四月 3, 2011 16:02:16 #1

    木木真高产,果断沙发

    • 换了新主题,新的创意就不断浮现咯~

      • TyTN
        四月 3, 2011 16:35:16

        我的头像悲剧了,还木有显示啊 :arrow:

  2. :lol: 怎么感觉木木老师在一步步的把现有的所用到的都放出来

    • 在重构时做到一些更新和优化,不过这个… …是最新的~

  3. Melody
    四月 3, 2011 16:10:16 #3

    …很不错饿,最近都在分享好东西啊

    • 恩,我感觉状态又回来了,让大家跟着我一块儿折腾~

  4. 木木最近折腾的很厉害啊,还是觉得你写的jq好看,我写的总是一坨很基本。

    • 感觉来了挡也当不住~jQuery嘛,理思路比较重要~

  5. 木木这一天两篇,让我们应接不暇了啊。。

    • 上篇本来是不会有的……

  6. 无冷
    四月 3, 2011 17:27:17 #7

    最后面的delay 延时写得麻烦哦,

    • 额,一开始我准备这样发出来了,不过这个太有失水准了……

  7. 老王
    四月 3, 2011 18:39:18 #9

    哈,我用图片的。不过你加的鼠标移上去取得焦点很好,正好我有用。 :twisted:

    • 折腾过之前那个效果的加上应该不难~

  8. shekck
    四月 3, 2011 20:04:20 #11

    效果不错哦,现在折腾你博客的效果成了我一大乐趣了,哈哈

    • 这就是我的初衷~有些人折腾完给来个集成好的主题,作者又是写自己的,我就晕了……

  9. 奚少
    四月 3, 2011 20:20:20 #12

    这个真的很不错,特别是那六个点一个个载入。决定折腾上~

    • 这个效果对折腾过原来伸缩效果的相当有吸引力地~ :lol:

  10. Maplews
    四月 3, 2011 21:01:21 #13

    还是用for方便点 :arrow:

    • 代码少很多很多~不过性能应该差不多

      • 那性能能差不多当然选择简洁一点的啦。哈哈~ :lol:

    • 似地~想法很早就有了,今儿处理思路才冒出来。

  11. Microhu
    四月 3, 2011 21:47:21 #15

    厉害..这个细节效果蛮好的 :razz:

  12. SayMe
    四月 3, 2011 21:48:21 #16

    看来以后要多多来看看 多向博主学习才能够美化自己的博客 :smile:
    新人请指教.

      • 恩 但是好像也不适合我现在的主题~~~

  13. :arrow: 首页的翻页挺不错的。

  14. hzlzh
    四月 4, 2011 00:11:0 #19

    这个标题好拉风。。。。我被忽悠了

  15. 小邪
    四月 4, 2011 07:36:7 #20

    羡慕中, :arrow: 话说我最近学业鸭梨好大,都木有精力折腾了,刚刚还挂了项目报告 ╮(╯▽╰)╭,杯具。

    • 额,挂什么的最讨厌了,话说我那体能测试补考竟然还不让我过……

  16. wmtimes
    四月 4, 2011 08:36:8 #21

    虽说是个小功能,做的可是够细致的。

  17. zva
    四月 4, 2011 14:23:14 #22

    又来学习了

  18. winy
    四月 4, 2011 15:27:15 #23

    原来是动态效果啊,明白了。如果是我的话,我就会用好多delay然后每次html()

    • 不妨试试,我用delay和append不行,才换思路的~

  19. 万戈
    四月 4, 2011 15:33:15 #25

    jQuery1.4太大了,所以我还是避免使用了delay() :evil:

  20. 爱惜
    四月 4, 2011 20:18:20 #27

    看标题还以为卡住了 :arrow:
    话说这个新主题看起来好像没加载完一样,哈哈个性。
    动态效果很不错。不过懒得折腾了

  21. 小清
    四月 17, 2011 21:09:21 #28

    木木,为什么我照着做之后,点击虽然会变加载中,但是还是直接进入页面了,阻止无效?

    能详细说说吗?

    • 你主题头部加载了2个jQuery库~去掉一个

  22. Ben
    六月 5, 2011 00:11:0 #29

    opera在这时候不给力啊。chrome好像也不行

    • 好像?这个就得你自己查查咯……

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">