
若直接通过此文章的链接进来的,建议返回首页点击“文章标题”或“接着看”,体验体验此文所讲的效果~
结合去年分享的《首页文章伸缩新方式新代码》中的代码,讲讲如何添加这个小效果。
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,还加了一句小代码,有童鞋发现了吗?

木木真高产,果断沙发
换了新主题,新的创意就不断浮现咯~
我的头像悲剧了,还木有显示啊
恩,清了下缓存~
在重构时做到一些更新和优化,不过这个… …是最新的~
…很不错饿,最近都在分享好东西啊
恩,我感觉状态又回来了,让大家跟着我一块儿折腾~
啦啦啦啦。
咯咯咯咯~
木木最近折腾的很厉害啊,还是觉得你写的jq好看,我写的总是一坨很基本。
感觉来了挡也当不住~jQuery嘛,理思路比较重要~
木木这一天两篇,让我们应接不暇了啊。。
上篇本来是不会有的……
最后面的delay 延时写得麻烦哦,
额,一开始我准备这样发出来了,不过这个太有失水准了……
又来学习了
哈,我用图片的。不过你加的鼠标移上去取得焦点很好,正好我有用。
很早就想加上来着~
不错 这的需要学习一下了啊 哈哈
折腾过之前那个效果的加上应该不难~
效果不错哦,现在折腾你博客的效果成了我一大乐趣了,哈哈
这就是我的初衷~有些人折腾完给来个集成好的主题,作者又是写自己的,我就晕了……
这个真的很不错,特别是那六个点一个个载入。决定折腾上~
这个效果对折腾过原来伸缩效果的相当有吸引力地~
还是用for方便点
代码少很多很多~不过性能应该差不多
那性能能差不多当然选择简洁一点的啦。哈哈~
又搞出个新效果了、??
似地~想法很早就有了,今儿处理思路才冒出来。
厉害..这个细节效果蛮好的
呵,用来摆酷~
看来以后要多多来看看 多向博主学习才能够美化自己的博客
新人请指教.
欢迎欢迎~
HOHOHO~接着试呗!
恩 但是好像也不适合我现在的主题~~~
这个标题好拉风。。。。我被忽悠了
难得忽悠到人~
羡慕中,
话说我最近学业鸭梨好大,都木有精力折腾了,刚刚还挂了项目报告 ╮(╯▽╰)╭,杯具。
额,挂什么的最讨厌了,话说我那体能测试补考竟然还不让我过……
虽说是个小功能,做的可是够细致的。
拿来玩儿~
又来学习了
原来是动态效果啊,明白了。如果是我的话,我就会用好多delay然后每次html()
不妨试试,我用delay和append不行,才换思路的~
林木木 很给里啊
HOHO~必须地!
jQuery1.4太大了,所以我还是避免使用了delay()
有gzip不怕~
用上了~
看看去~
看标题还以为卡住了
话说这个新主题看起来好像没加载完一样,哈哈个性。
动态效果很不错。不过懒得折腾了
HOHO,忽悠大家的~
木木,为什么我照着做之后,点击虽然会变加载中,但是还是直接进入页面了,阻止无效?
能详细说说吗?
你主题头部加载了2个jQuery库~去掉一个
opera在这时候不给力啊。chrome好像也不行
好像?这个就得你自己查查咯……
呵呵 ,又学习了!