【WordPress 教程】单侧伸缩式时间轴记录网站发展历程

2019年6月11日00:00:51 1 862
摘要

wordpress时间轴效果常见于博客历程页面中,以时间为轴,记录博客发展过程中的重要时刻。也有利用时间轴记录自己的心情,主题更新日志等情况,是一个比较实用且可丰富博客展示效果的功能。本文主要讲解单侧伸缩式时间轴的实现过程。

【单侧伸缩式时间轴】

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;
		});
	})();
});
  • 这部分代码用来实现点击“年份”时,该段内容展开/闭合效果。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar 7758521

      为啥评论不上去