之前在网上看到，有很多人写的时间轴效果，于是自己也模仿着写了写。
以下贴出自己写的解决方法(横向轴与纵向轴)。
简单的时间轴效果容易实现，但如果需要看起来有模有样，就需要对页面进行设计布置了。
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="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="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>
效果图：
