一、时间轴特效 timeline.js 算法思路： 1、点击某个时间点，将该时间点上的li元素添加active类 2、去除上一个li上已添加的active类 语法步骤： step1：定义一个变量，记录当前已经添加active类的li的索引号 step2：查找所有被点击的元素对象 step3：查找所有li元素对象 step4：为每个被点击的对象绑定单击事件 step5：为被点击的时间点li添加active类 step6：根据索引号变量的值，去除上一个li的active类 step7：将索引号变量的值更新为被点击的li的索引号 timeline.js源码：

window.onload = function(){ var //step1 curIndex = 0, //step2 timeLine = document.getElementById("timeline"), clickArea = timeLine.getElementsByTagName("s"), //step3 timePoint = timeLine.getElementsByTagName("li"); //step4 for(var i = 0,len = clickArea.length;i < len;i++){ (function( i ){ clickArea[i].onclick = function(){ //console.log( i );//测试 //step5 timePoint[i].className = "active"; //step6 timePoint[curIndex].className = ""; //step7 curIndex = i; }; })( i ); } }; timeline.css源码： html,body{ background: #c2edf4; }

.container { width: 1000px; margin: 0 auto; background: url(data:image/png); repeat -y 165px 0; }

/* 默认样式 */ .timeline li{ height: 160px; position: relative; }

.timeline li div { position: absolute; }

.timeline .check .spring{ position: absolute; display: block; width: 51px; height: 6px; left: 105px; top: 47px; background: url(data:image/png); }

.timeline .check s { position: absolute; display: block; left: 157px; top: 40px; width: 16px; height: 16px; border: 3px solid #41838E; background: #fff url(../images/sprite.png) 1px -100px; cursor: pointer; } .timeline .check .line { position: absolute; width: 38px; height: 1px; background: #fff; left: 180px; top: 50px; font-size: 1px; }

.timeline .thumb { width: 82px; top: 13px; left: 32px; }

.timeline .thumb img { width: 80px; height: 72px; border: 5px solid #41838E; }

.timeline .thumb span { display: block; height: 30px; line-height: 30px; color: #41838E; text-align: center; font-size: 12px; font-family: Arial black; }

.timeline .content { left: 234px; top: 10px; width: 730px; border-left: 5px solid #41838E; background: #fff }

.timeline .content h3{ margin: 23px 15px; font-size: 30px; font-family: microsoft yahei; } .timeline .content p{ display: none; }

.timeline .content b{ position: absolute; display: block; width: 17px; height: 34px; background: url(../images/sprite.png); left: -21px; top: 25px; }

/* 高亮样式 */ .timeline li.active{ height:250px; }

.timeline li.active div{ position: absolute; }

.timeline .active .check .spring{ left:110px; top: 47px; background: url(data:image/png) }

.timeline .active .check s { left: 152px; top: 36px; width: 20px; height: 10px; border: 5px solid #fff; background: #F26328 url(../images/sprite.png) 2px -200px; cursor: pointer; }

.timeline .active .check .line{ background: #F26328; width: 43px; left: 176px; top: 50px; }

.timeline .active .thumb{ width: 110px; top: 10px; left: -10px; }

.timeline .active . thumb img { width: 110px; top: 10px; left: -10px; }

.timeline .active .thumb span { color: #F26328; }

.timeline .active .content { border-left: 5px solid #F26328; }

.timeline .active .content p { display: block; margin: 23px 15px; line-height: 1.5; font-size:14px; }

.timeline .active .content b { background: url(../images/sprite.png) 0 -43px; left: -20px; } timeline.html源码: timeline 10:00 白宫否认MH370航班降落美军事级第一 人民网旧金山3月18日电 美国白宫方面今日正式否认 了失联客机已在印度洋中部某美军军事基地降落的传闻 7:30 第12天最新消息汇总：调查焦点在于机上机组人员 ①可排除中国乘客涉嫌恐怖和破坏活动的嫌疑②泰国空 军司令证实曾捕获MH370信号

人民网旧金山3月18日电 美国白宫方面今日正式否认 了失联客机已在印度洋中部某美军军事基地降落的传闻

①可排除中国乘客涉嫌恐怖和破坏活动的嫌疑②泰国空 军司令证实曾捕获MH370信号