read more滑动效果代码

2009-09-29 17:12:47 来自: 撒(认亲认亲，认错就给亲一个……)

抱歉这一阵很忙

======================

首先看新模板index-post/旧模板index.log.content部分，必须有类似这样的格式

……
<div class="postHeader">
……
</div>
<div class="postBody">
……
</div>
<div class="postFooter">
……
</div>
……

如果是这样的话把<div class="postBody">改为<div class="postBody" style="display: none;">

然后以下代码放在新模板index最前面、旧模板index的</head>之后

<script src="http://public.blogbus.com/imgs/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(".postHeader").click(function(){
$(this).next(".postBody").slideToggle(“slow”);
return false;
});
</script>

有不明白不成功请继续问，注明地址

======================

我不知道自己的理解是否正确，因此请先看预览：
http://skin-preview.513066.blogbus.com/

点击日志标题，日志全文滑出（也可改成摘要），再次点击是收起
点击下方comment新窗口评论
点击下方pack日志内容收起
对列表页每一篇日志都有效

请注意，滑开和收起时候如果有一点卡是由于我设置了margin造成的。只要把margin改成padding就可以了（现在懒得弄= =

如果是的话我会把代码整理出来（不过不要相信我的解说水平orz

2009-09-29 17:21:53 童喜喜。 (我看我真的要废了...)

恩，顶一个。不错

> 删除
2009-10-01 14:36:05 Don. (2010李玟世界巡回演唱会-重庆站)

so good!

> 删除
2009-10-01 16:05:20 Shiki (名字叫做式)

快写出来吧~

> 删除
2009-10-03 21:57:30 井迟||小蘑菇。 (对我好。 [ 树树树。)

怎么做到的呢

> 删除
2009-10-03 22:27:29 阿槿

好想知道代码啊~

> 删除
2009-10-04 02:55:04 撒 (认亲认亲，认错就给亲一个……)

已更新= =

> 删除
2009-10-04 15:17:51 Norli (不霍莲会死星人…)

这个效果超漂亮的XDD非常喜欢～

> 删除
2009-10-04 15:54:14 Vine.L (我缺席太多次同学聚会了。)

不错！！我要试试看~~

> 删除
2009-10-18 18:55:04 曼殊 (彼岸花开，却道曼殊。)

难道是JS冲突？总之，失败了……

> 删除
2009-10-19 01:34:11 梨花 (我只是个卖花布的)

偶的模板没有泪奔

> 删除
2009-10-19 12:09:40 whitree (我有小组了，欢迎加入)

这个效果挺好看,回头试试

> 删除
2009-10-25 16:28:47 ♂乔治鱼♀ (给我片的在月底前发。放假怕丢～)

为什么是这样的。泪。

2009-10-23〖颠三倒四的周末又来了。 - [′抹ト去]〗

Tag:
鱼。 at 18:49:09 | 阅读全文 | 评论2 | 编辑 | 分享 0

共14页第一页上一页 1 2 3 4 5 6 7 8 9 10 下一页最后一页

按你说的都弄的正确的。但是只有只有这样。文章只显示题目。

滑动更是没有吖。

> 删除
2009-11-08 13:08:31 mi. (這也不對那也不對.)

對吖對吖.我跟樓上一樣..沒有滑動.= =

> 删除
2009-11-13 13:00:53 太初 (用这样的方法来督促自己。看完！)

谢谢分享~~！

> 删除
2009-11-13 13:21:34 、Lion (恋、)

DING啊

> 删除
2009-12-11 14:42:54 onice (Mc。薬小耀)

如果不止想显示个title ,同时显示2-3行日志,点击以后再显示摘要全部,
怎么控制呢

> 删除
2009-12-12 23:08:53 Don. (2010李玟世界巡回演唱会-重庆站)

楼主，快来。
失败了。
只显示title，没正文。

> 删除