单侧伸缩式时间轴
一、效果预览
也可以点击 博客历程 查看动态效果。
二、功能介绍
实现过程
- 采用自定义列表的方式实现时间轴效果
- 时间轴以年为单位进行分段,每一个“年”为一段
实现功能
- 点击“年份”可以展开或闭合该段内容,默认情况下第一段展开,其余闭合
- 鼠标移动到具体的某一行时,该行内容颜色发生变化,以突出鼠标所在当前行
- 自适应屏幕,在不同屏幕尺寸下实现相同效果
相关说明
- 使用相同主题的童鞋可以直接套用,使用其他主题的童鞋,可能需要对样式做一定的调整
- 我没有对时间轴在后台编辑器的样式做优化,所以在可视化模式下不能实时看到效果,只能看到基本框架结构
- 增删内容时,建议在文本模式下操作
三、操作方法
首先:新建一个页面,页面标题自定义,切换到【文本】模式,复制以下代码到编辑器中并发表
<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】文件,在任意位置(或最后)添加展开
/* 站点动态时间轴 */ .time-line { padding:0 0 0 100px; } #history-time-line p.year { font-size: 18px; color: #08c; font-weight: bold; text-indent: 0; margin: 0 0 10px -20px; padding: 0 0 0 20px; border-left: 5px solid #08c; cursor: pointer; } .year-num { font-size: 16px; color: #999; margin: 0 0 0 10px; } .time-line dl { border-left: 1px dashed #08c; } .time-line dl dt { list-style:none; font-weight: normal; line-height: 100%; color: #999; position: relative; left: -60px; margin: 0; padding: 5px 0 0 0; } .time-line dl dt::after { position: absolute; top: 4px; margin: 4px 9px; content: ''; width: 12px; height: 12px; border-radius: 50%; background-color: #08c; } @media screen and (max-width:700px) { .time-line { padding: 0 0 0 70px; } .time-line dl dt::after { left:44px; } } .time-line dl dt:hover:after { background-color: #00cc00; } .time-line dl dd { position: relative; top: -24px; margin: 0 0 -15px 20px; } .time-line dl dd a { color: #08c; } .time-line dl dt:hover, .time-line dl dd:hover { color: #00cc00; } .time-line dl dd a:hover { color: #999; }
代码说明:
- 第49行的一条代码主要用来适应屏幕宽度不大于700时让时间轴整体向左移动,如下图所示:
- 第49行的第二条代码主要用来当屏幕宽度不大于700px时,使蓝色小圆点和蚂蚁线水平居中对齐。
上图就是没对齐时的效果,下图是对齐后的效果。
但是,我在浏览器的【F12--响应式模式设计】下查看时又是正常的,如下图所示:
所以,为了保险起见,我还是加上了这条代码。
接着:打开【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; }); })(); });
这部分代码用来实现点击“年份”时,该段内容展开/闭合效果。
左右对称时间轴完整案例
另外,该主题也集成了左右对称时间轴的功能,其效果如下图所示:
也可以点击 本站公告 查看效果。(背景图片显示不完整是截图工具的原因。)
它主要用于分类列表页和公告的展示上,因此是一个单独的PHP文件,CSS部分是内联在这个文件中的。下面将这个文件的完整代码附上,供需要的童鞋参考。
左右对称时间轴模板展开
<?php /** * 时间轴分类模板 */ get_header(); ?> <style type="text/css"> #primary { width: 100%; } .post { margin: 0; padding: 0; background: none; border: none; box-shadow: none; border-radius: none; } .container { width: 98%; margin: 0 auto; } #timeline { position: relative; } #timeline::before { content: ''; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #fff; box-shadow: 2px 1px 1px #ddd inset; } @media only screen and (min-width: 900px) { #timeline::before { left: 50%; margin-left: -2px; } } #timeline { margin: 15px 0; } .timeline-block { position: relative; margin: 10px 0; } .timeline-block:after { content: ""; display: table; clear: both; } .timeline-block:first-child { margin-top: 0; } .timeline-block:last-child { margin-bottom: 0; } @media only screen and (min-width: 900px) { .timeline-block { margin: 30px 0; } .timeline-block:first-child { margin-top: 0; } .timeline-block:last-child { margin-bottom: 0; } } .timeline-img { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; border: 3px solid #ddd; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } .timeline-img.cdb { border: 3px solid #46c0e6; } .timeline-img { font-size: 20px; font-size: 2rem; font-weight: bold; text-align: center; line-height: 50px; } @media only screen and (max-width: 900px) { .timeline-img { font-size: 14px; font-size: 1.4rem; font-weight: bold; text-align: center; line-height: 33px; } } .timeline-img img { display: block; width: 24px; height: 24px; position: relative; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px; } .timeline-img.time-picture { background: #fff; } .timeline-img.movie { background: #c03b44; } .timeline-img.location { background: #f0ca45; } @media only screen and (min-width: 900px) { .timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .cssanimations .timeline-img.is-hidden { visibility: hidden; } .cssanimations .timeline-img.bounce-in { visibility: visible; -webkit-animation: bounce-1 0.6s; -moz-animation: bounce-1 0.6s; animation: bounce-1 0.6s; } } .timeline-content { position: relative; margin-left: 60px; background: #fff; padding: 20px; border: 1px solid #ddd; border-radius: 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } .timeline-content:after { content: ""; display: table; clear: both; } .timeline-content h2 { font-size: 16px; font-size: 1.6rem; } .timeline-content .read-more, .timeline-content .date { display: inline-block; } .timeline-content p { margin: 10px 0; line-height: 1.6; } .timeline-content .read-more { float: right; padding: 2px 10px; background: #acb7c0; color: #fff; border-radius: 2px; } .no-touch .timeline-content .read-more:hover { background-color: #595959; } a.read-more:hover { text-decoration: none; background-color: #424242; } .timeline-content .date { float: left; padding: 10px 0; opacity: .7; } .timeline-content::before { content: ''; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; } @media only screen and (min-width: 768px) { .timeline-content h2 { font-size: 16px; font-size: 1.6rem; } .timeline-content p { font-size: 14px; font-size: 1.4rem; } .timeline-content .read-more, .timeline-content .date { font-size: 14px; font-size: 1.4rem; } } @media only screen and (min-width: 900px) { .timeline-content { margin-left: 0; padding: 1.6em; width: 45%; } .timeline-content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: white; } .timeline-content .read-more { float: right; } .timeline-content .date { position: absolute; width: 100%; left: 122%; top: 6px; font-size: 16px; font-size: 1.6rem; } .timeline-block:nth-child(even) .timeline-content { float: right; } .timeline-block:nth-child(even) .timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: white; } .timeline-block:nth-child(even) .timeline-content .read-more { float: right; } .timeline-block:nth-child(even) .timeline-content .date { left: auto; right: 122%; text-align: right; } .cssanimations .timeline-content.is-hidden { visibility: hidden; } .cssanimations .timeline-content.bounce-in { visibility: visible; -webkit-animation: bounce-2 0.6s; -moz-animation: bounce-2 0.6s; animation: bounce-2 0.6s; } } @media only screen and (min-width: 900px) { .cssanimations .timeline-block:nth-child(even) .timeline-content.bounce-in { -webkit-animation: bounce-2-inverse 0.6s; -moz-animation: bounce-2-inverse 0.6s; animation: bounce-2-inverse 0.6s; } } .timeline-content .thumbnail { max-width: 100px } </style> <section id="timeline" class="container"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="timeline-block wow fadeInUp" data-wow-delay="0.3s"> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="timeline-img time-picture"> <?php the_time( 'd' ) ?> </div> <div class="timeline-content"> <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?> <figure class="thumbnail"> <?php if (zm_get_option('lazy_s')) { zm_thumbnail_h(); } else { zm_thumbnail(); } ?> </figure> <p> <?php if (has_excerpt()){ ?> <?php the_excerpt() ?> <?php } else { echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 60,"..."); } ?> </p> <a href="<?php the_permalink(); ?>" class="read-more" rel="bookmark">阅读全文</a> <span class="date"><?php the_time( 'Y年m月' ) ?></span> </div> </div><!-- #post --> </div> <?php endwhile;endif; ?> <?php begin_pagenav(); ?> </section><!-- .content-area --> <script type="text/javascript"> $("#timeline .timeline-img:even").addClass("cdb"); </script> <?php get_footer(); ?>
全文结束!
继续阅读
如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!