【单侧伸缩式时间轴】
2019年
- 01-01
- 内容 1
- 01-02
- 内容 2
- 01-03
- 内容 3
2018年
- 01-01
- 内容 4
- 01-02
- 内容 5
- 01-03
- 内容 6
【功能介绍】
实现过程
- 采用自定义列表的方式实现时间轴效果
- 时间轴以年为单位进行分段,每一个“年”为一段
实现功能
- 点击“年份”可以展开或闭合该段内容,默认情况下第一段展开,其余闭合
- 鼠标移动到具体的某一行时,该行内容颜色发生变化,以突出鼠标所在当前行
- 自适应屏幕,在不同屏幕尺寸下实现相同效果
相关说明
- 使用相同主题的童鞋可以直接套用,使用其他主题的童鞋,可能需要对样式做一定的调整
- 我没有对时间轴在后台编辑器的样式做优化,所以在可视化模式下不能实时看到效果,只能看到基本框架结构
- 增删内容时,建议在文本模式下操作
【操作方法】
- 首先:新建一个页面,页面标题自定义,切换到【文本】模式,复制以下代码到编辑器中并发表
<div id="history-time-line"> <p class="year">年份 1</p> <div class="time-line"> <dl> <dt>日期 1</dt> <dd>内容 1</dd> <dt>日期 2</dt> <dd>内容 2</dd> <dt>日期 3</dt> <dd>内容 3</dd> </dl> </div> <p class="year">年份 2</p> <div class="time-line"> <dl> <dt>日期 4</dt> <dd>内容 4</dd> <dt>日期 5</dt> <dd>内容 5</dd> <dt>日期 6</dt> <dd>内容 6</dd> </dl> </div> </div>
代码说明:
- 代码第 2~12 行为一个内容段,也就是一个“年”,这里我放了两个段作参考
- 如果你需要多个段,就复制这部分代码到最后一个
</div>
的前面即可 - “年份”:可任意输入,长度不限
- “日期”:由于样式的关系需要写成“XX-XX”的格式,否则后面的蓝色小圆点会不在蚂蚁线的中间
- “内容”:可任意输入,长度不限
后台编辑器效果:
然后:打开【style.css】文件,在任意位置(或最后)添加
代码说明:
- 第 49 行的一条代码主要用来适应屏幕宽度不大于 700 时让时间轴整体向左移动
- 第 49 行的第二条代码主要用来当屏幕宽度不大于 700px 时,使蓝色小圆点和蚂蚁线水平居中对齐。
接着:打开【js/script.js】文件,找到代码
// 文字展开 $(".show-more span").click(function(e) { $(this).html(["<i class='be be-squareplus'></i>展开", "<i class='be be-squareminus'></i>折叠"][this.hutia ^= 1]); $(this.parentNode.parentNode).next().slideToggle(); e.preventDefault(); });
在其下面添加
//博客历程时间轴展开 $(document).ready(function(){ (function(){ $('#history-time-line p.year').each(function(){ var num=$(this).next().children('dl').children('dt').size(); var text=$(this).text(); $(this).html(text+' <span class="year-num">共'+num+'条</span>'); }); var $all_time_line=$('#history-time-line .time-line'), $first_time_line=$('#history-time-line .time-line:first'); $all_time_line.hide(1,function(){ $first_time_line.show(); }); $('#history-time-line p.year').click(function(){ $(this).next().slideToggle(400); return false; }); })(); });
- 这部分代码用来实现点击“年份”时,该段内容展开/闭合效果。
- 或者可以新建一个JS文件保存代码自定义文件位置,也方便以后主题更新不用去修改代码。
继续阅读
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-
2022年9月30日 16:02 18楼
早上班一小时没人记得,早下班一分钟就被人惦记。
2021年8月17日 01:03 17楼
后面讲话的同学,注意收敛一下,你们吵到中间睡觉的同学了。
2021年5月20日 23:16 16楼
上完厕所,是先擦屁股还是先冲水?然而99%的人选择先锁屏。
2020年7月12日 00:32 15楼
众芳摇落独暄(xuān)妍,占尽风情向小园。疏影横斜水清浅,暗香浮动月黄昏。霜禽欲下先偷眼,粉蝶如知合断魂。幸有微吟可相狎(xiá),不须檀板共金樽(zūn)。—-【山园小梅(北宋林逋(bū))】
2020年5月23日 21:37 14楼
style.css这里代码呢
2020年5月23日 21:23 13楼
春风得意马蹄疾,一日看尽长安花—-【唐·孟郊·登科后】
2020年4月17日 17:40 12楼
正好需要呢 来看看 是否按照你的方法我可以实现 非常感谢
2020年2月28日 07:05 11楼
地下城与勇士DNF换频道掉线或组队卡,大多是因为你的路由器不行,尤其是免费软路由。