之前在网上看到，有很多人写的时间轴效果，于是自己也模仿着写了写。
以下贴出自己写的解决方法(横向轴与纵向轴)。
简单的时间轴效果容易实现，但如果需要看起来有模有样，就需要对页面进行设计布置了。
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>
效果图：
http://www.gaodaima.com/30688.html
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" title="网页效果-简单的时间轴实现_js"; $("#backgroundpic").css("background-image","url("+ urltext +")"); },function(){ $(this).find(".shiji").slideUp(400); }); }); </script>
效果图：
欢迎大家阅读《网页效果-简单的时间轴实现_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：网页效果-简单的时间轴实现_js
转载请注明原文链接：网页效果-简单的时间轴实现_js
