【效果展示】
【功能介绍】
实现过程
- 采用自定义列表的方式实现时间轴效果
- 时间轴以年及月为单位进行分段,每一个“年”“月”为一段
实现功能
- 点击“月份”可以展开或闭合该段内容,默认情况下第一段展开,其余闭合
- 鼠标移动到具体的某一行时,该行内容颜色发生变化,以突出鼠标所在当前行
- 自适应屏幕,在不同屏幕尺寸下实现相同效果
相关说明
- 使用相同主题的童鞋可以直接套用,使用其他主题的童鞋,可能需要对样式做一定的调整
- 我没有对时间轴在后台编辑器的样式做优化,所以在可视化模式下不能实时看到效果,只能看到基本框架结构
- 增删内容时,建议在文本模式下操作
【操作方法】
- 首先:新建一个页面,页面标题自定义,切换到【文本】模式,复制以下代码到编辑器中并发表
代码说明:
- 代码第 2~14 行为一个内容段,也就是一个“年”,这里我放了两个段作参考
- 如果你需要多个段,就复制这部分代码到最后一个
</div>
的前面即可 - 代码第 4~8 行为一个内容段,也就是一个“月”,这里我放了两个段作参考
- 如果你需要多个段,就复制这部分代码到“年段”最后一个
</ul>
的前面即可 - 代码第 6 行为内容段,复制整段到“月段”最后一个
</ul>
的前面即可 - “年份”:可任意输入,长度不限
- “日期”:可任意输入,长度不限
- “内容”:可任意输入,长度不限
后台编辑器效果:
然后:打开【style.css】文件,在任意位置(或最后)添加 Begin主题可添加定制风格内。
style.css代码:
.year { font-size: 16px; margin: 10px -21px 10px -21px; padding: 0 20px; border-bottom: 1px solid #ebebeb; border-left: 5px solid #0088cc; } .mon { color: #000; line-height: 30px; margin: 5px 0 5px 5px; cursor: pointer; } .post_list li { line-height: 30px; text-indent: 2em; } .post_list { color: #999; margin: 0 0 10px 0; } .mon-num { color: #999; margin: 0 0 0 10px; }
接着:新建一个JS文件保存代码自定义文件位置,也方便以后主题更新不用去修改代码。
//博客历程时间轴展开 $(document).ready(function(){ (function(){ $('#all_archives span.mon').each(function(){ var num=$(this).next().children('li').size(); var text=$(this).text(); $(this).html(text+' <span class="mon-num">'+num+' 条</span>'); }); var $al_post_list=$('#all_archives ul.post_list'), $al_post_list_f=$('#all_archives ul.post_list:first'); $al_post_list.hide(1,function(){ $al_post_list_f.show(); }); $('#all_archives span.mon').click(function(){ $(this).next().slideToggle(400); return false; }); })(); });
- 这部分代码用来实现点击“月份”时,该段内容展开/闭合效果。
- 也可以在编辑时加载代码如下
//博客历程时间轴展开 <script type="text/javascript"> $(document).ready(function(){ (function(){ $('#all_archives span.mon').each(function(){ var num=$(this).next().children('li').size(); var text=$(this).text(); $(this).html(text+' <span class="mon-num">'+num+' 篇</span>'); }); var $al_post_list=$('#all_archives ul.post_list'), $al_post_list_f=$('#all_archives ul.post_list:first'); $al_post_list.hide(1,function(){ $al_post_list_f.show(); }); $('#all_archives span.mon').click(function(){ $(this).next().slideToggle(400); return false; }); })(); }); </script>
继续阅读
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-
2022年4月18日 21:38 17楼
为什么家长只看分数?废话!难道他们看得懂题目?
2021年5月23日 06:21 16楼
和我888
2021年5月23日 06:21 15楼
觉得你暗恋的人也在暗恋你,你知道这叫什么吗?这叫想象力。
2021年3月31日 15:21 14楼
人与人之间,除了生离与死别,并无第三种结局。
2021年3月23日 18:42 13楼
找了好久了
2021年2月2日 11:25 12楼
月黑雁飞高,单(chán)于夜遁(dùn)逃。欲将轻骑(jì)逐,大雪满弓刀。—-【塞下曲(唐卢纶)】
2021年2月1日 11:22 11楼
无情未必真豪杰,怜子如何不丈夫—-【鲁迅】