Web经典案例_时间轴特效
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一、时间轴特效
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;