之前在网上看到，有很多人写的时间轴效果，于是自己也模仿着写了写。
以下贴出自己写的解决方法(横向轴与纵向轴)。
简单的时间轴效果容易实现，但如果需要看起来有模有样，就需要对页面进行设计布置了。
1.利用Js加简单的界面布置，实现时间轴鼠标点击轮换图片效果(纵向)。
实现思路：利用多个div加背景色做纵向时间轴的样式，用CSS进行定位布局(时间轴一般都相对于浏览器窗口位置进行定位，避免浮动)，再加上相应的文字描述。（:after,:before等一样能实现其效果），最后在用Js添加一些简单的鼠标事件。
HTML代码
<div id="timeline">
<div id="textout">
<div class="text" onmousemove="movecolor(1)" onmouseout="outcolor(1)">云海</div>
<div class="text" onmousemove="movecolor(2)" onmouseout="outcolor(2)">瀑布</div>
<div class="text" onmousemove="movecolor(3)" onmouseout="outcolor(3)">古树</div>
<div class="text" onmousemove="movecolor(4)" onmouseout="outcolor(4)">夕阳</div>
<div class="text" onmousemove="movecolor(5)" onmouseout="outcolor(5)">大海</div>
</div>
<div id="lineout">
<div class="line" id="l1" onmousemove="movecolor(1)" onmouseout="outcolor(1)"></div>
<div class="line" id="l2" onmousemove="movecolor(2)" onmouseout="outcolor(2)"></div>
<div class="line" id="l3" onmousemove="movecolor(3)" onmouseout="outcolor(3)"></div>
<div class="line" id="l4" onmousemove="movecolor(4)" onmouseout="outcolor(4)"></div>
<div class="line" id="l5" onmousemove="movecolor(5)" onmouseout="outcolor(5)"></div>
</div>
</div>
<div id="picture"><img id="backgroundimg" src=http://www.update8.com/Web/Javascript/"img/pic1.jpg"></div>
CSS代码
#timeline{
position: fixed;
width: 100%;
height: 100%;
left:30px;
top: 180px;
}
#textout{
width:35px;
float: left;
height: 100%;
margin-left: 20px;
padding-top:10px;
cursor:pointer;
}
#lineout{
width:4px;
height: 100%;
float: left;
margin-left: 5px;
}
.line{
width: 4px;
height: 50px;
background: #ccc;
}
.text{
width: 35px;
height: 50px;
}
#picture{
width: 1000px;
height: 500px;
margin-top: 50px;
margin-left:auto ;
margin-right:auto;
}
JS代码：
<script type="text/javascript">
function movecolor(num){
document.getElementById("l"+num).style.background = "#98E0FA" ;
document.getElementById("backgroundimg").src=http://www.update8.com/Web/Javascript/"img/pic"+num+".jpg";
}
function outcolor(num){
document.getElementById("l"+num).style.background = "#ccc" ;
}
</script>
效果图：
2.利用Jquery加简单的界面布置，实现时间轴鼠标点击轮换图片效果(横向)。
实现思路，利用一个div设置背景图片，做出横向时间轴的样式；在其中加入块级元素li，加入简单的背景图片，用来实现简单的时间节点效果；最后在用Jquery加上相应的鼠标事件，对其他的页面元素进行操作。
HTML代码
<body>
<div class="clearfix course_nr">
<ul class="course_nr2">
<li>
长城
<div class="shiji">
<h1>长城</h1>
</div>
</li>
<li>
长江
<div class="shiji">
<h1>长江</h1>
</div>
</li>
<li>
上海
<div class="shiji">
<h1>上海</h1>
</div>
</li>
<li>
世博会
<div class="shiji">
<h1>世博会</h1>
</div>
</li>
<li>
中国城
<div class="shiji">
<h1>中国城</h1>
</div>
</li>
<li>
故宫
<div class="shiji">
<h1>故宫</h1>
</div>
</li>
</ul>
</div>
<div id="backgroundpic"></div>
</body>
CSS代码：
.course_nr{
width: 1100px;
height:158px;
background:url(../img/ico1.gif) repeat-x center;
margin-left: 120px;
}
.course_nr li{
float:left;
background:url(../img/ico2.gif) no-repeat center top;
padding-top:30px;
width:140px;
text-align:center;
position:relative;
margin-top:65px;
}
.shiji{
position:absolute;
width:100%;
left:0;
top:-20px;
display:none;
}
.shiji h1{
height:67px;
line-height:67px;
color:#518dbb;
font-weight:bold;
background:url(../img/ico3.gif) no-repeat center top;
margin-bottom:8px;
}
.shiji p{
line-height:14px;
color:#999;
}
#backgroundpic{
width: 1000px;
height: 500px;
margin-top: -38px;
margin-left: auto;
margin-right: auto;
background-image:url(../img/长城.jpg);
}
JS代码：
<script type="text/javascript" src="js/jquery1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$(".course_nr2 li").hover(function(){
$(this).find(".shiji").slideDown(600);
var urltext = "img/"+$(this).find(".shiji").text().trim()+".jpg";
$("#backgroundpic").css("background-image","url("+ urltext +")");
},function(){
$(this).find(".shiji").slideUp(400);
});
});
</script>
效果图：
|
