您的位置：首页 > 其它

有一种精神叫做尤文

2009-04-25 05:16 190 查看

【时间轴】
用列表来实现，每个li里面呈现当前轴的内容；
思路：需要有一个变量来保存当前li的序号
当时间轴变化时，要将当前的li选中并取消对以前li的选中

html文件代码：

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/timeline.css">
<script type="text/javascript" src="js/timeline.js"></script>
</head>
<body>
<div class="container">
<ul id="timeline" class="timeline">
<li class="active">
<div class="check">
<h1>@</h1>
</div>
<div class="content">
<h3>this is a header</h3>
<p>this is content</p>
</div>
</li>
........
中间是许多个li标签
........
<li >
<div class="check">
<h1>@</h1>
</div>
<div class="content">
<h3>this is a header</h3>
<p>this is content</p>
</div>
</li>
</ul>

</div>
</body>
</html>

CSS文件：

html,body{
background: lightblue;
}
.container{
width: 1000px;
margin:0 auto;
background: gray;
}
ul{
background: lightyellow;
}
/*默认样式*/
.timeline li{
height: 120px;
list-style: none;
position: relative;
}

.timeline li div{
position: absolute;
}

.timeline .check h1{
position: absolute;
display: block;
left: 10px;
background: url(../image/click.jpg);
cursor: pointer;
}

.timeline .check{
width: 30px;
height: 100%;
background: url(../image/line.jpg) repeat-y center;
}

li .content{
position: absolute;
width: 500px;
height: 80px;
left: 40px;
text-indent: 15px;
background: lightgreen;
}

.content p{
visibility: hidden;
}

/*have style:active;*/
.timeline .active h1{
border: 3px solid yellow;
}
.timeline .active .content{
height: 90px;
border: 3px solid yellow;
}
.timeline .active .content p{
visibility: visible;
}

CSS文件代码的几点说明：
.container中的margin:0 auto;作用是使元素居中显示
position属性：可以设置为absolute，然后用left和top属性来规定元素显示位置。
display: block;可以将不是块级元素的元素变成块级元素。

JS实现代码：

window.onload=function(){
var
//定义一个变量记录li的序号;初始化为0
curIndex=0,

//查找所有可被点击的元素对象
timeline = document.getElementById("timeline"),
clickArea = timeline.getElementsByTagName("h1"),

//查找所有的li对像
timePoint = timeline.getElementsByTagName("li");

//为每个被单击的对象绑定单击事件
for( var i=0 ,len = clickArea.length; i<len;i++){
(function(i){
clickArea[i].onclick = function(){

//为被点击的时间点li添加active类
timePoint[i].className = "active";

//根据记录的li变量，将active类去除
if(i!==curIndex){
timePoint[curIndex].className = " ";
curIndex=i;
}

};
//添加onmouseover事件
timePoint[i].onmousemove=function(){
timePoint[i].className = "active";
if(i!==curIndex){
timePoint[curIndex].className = " ";
curIndex=i;
}
}
})(i );
}
};

注意：(function(i){
..............
})(i);
这段代码的意思是匿名函数立即执行。
作用是:自己构造出块级作用域，如果没有这段代码：i的值会一直为len-1
效果图：

学习地址：http://edu.51cto.com/lesson/id-21873.html
别人的博客：/article/4676784.html（非常不错）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航