<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>时间轴</title> <link type="text/css" href="https://www.jb51.net/css/history.css"> <script type="text/javascript" src="https://www.jb51.net/js/jquery.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.easing.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/history.js"></script> </head> <body> <div> <ul> <li></li> <li></li> </ul> </div> <div> <div> <h2>生活轨迹</h2> <div> <div></div> <div> <div thisyear="20170115"> <span></span> <span></span> <span></span> <span></span> <div></div> </div> <div>YEAR</div> </div> <a href="#"></a> </div> </div> <div> <ul> <li> <div> <div> <div> <span>20170115</span> <span>8:00</span> </div> </div> <div><b></b></div> <div> <div><a href="#">出入口系统</a></div> </div> </div> </li> <li> <div> <div> <div> <span>20170115</span> <span>8:30</span> </div> </div> <div><b></b></div> <div> <div><a href="#">门禁系统</a></div> </div> </div> </li> <li> <div> <div> <div> <span>20170115</span> <span>9:00</span> </div> </div> <div><b></b></div> <div> <div><a href="#">停车场系统</a></div> <div>豫E87N90 离开停车场</div> </div> </div> </li> <li> <div> <div> <div> <span>20170115</span> <span>12:30</span> </div> </div> <div><b></b></div> <div> <div><a href="#">停车场系统</a></div> <div>豫E87N90 驶入停车场</div> </div> </div> </li> <li> <div> <div> <div> <span>20170115</span> <span>13:00</span> </div> </div> <div><b></b></div> <div> <div><a href="#">人脸识别系统</a></div> </div> </div> </li> <li> <div> <div> <div> <span>20170115</span> <span>14:00</span> </div> </div> <div><b></b></div> <div> <div><a href="#">非机动车系统</a></div> <div>黑色电动车 离开车棚</div> </div> </div> </li> <li> <div> <div> <div> <span>20170115</span> <span>16:30</span> </div> </div> <div><b></b></div> <div> <div><a href="#">非机动车系统</a></div> <div>黑色电动车 驶入车棚</div> </div> </div> </li> <li> <div> <div> <div> <span>20170115</span> <span>17:00</span> </div> </div> <div><b></b></div> <div> <div><a href="#">视频监控系统</a></div> </div> </div> </li> </ul> </div> </div> </body> </html>
4、运行的效果：
三、纵向可折叠时间轴
1、js文件（jQuery.js和 main.js）
（1）main.js文件
(function ($) { if (!!window.ActiveXObject && !window.XMLHttpRequest && (location.href=='http://www.lanrentuku.com' || location.href=='http://www.lanrentuku.com/')) return; $(function () { nav(); bnrSilder(); sideSlider(); helpToggle(); systole(); slideImg(); downM(); ExtMutual(); slides("#slides", ".slides"); skinMutual(); srollList("#dialog01", "11"); srollList("#dialog02", "6"); anchorLink(); var img = document.createElement("img"); img.onload = function() { window.onload = function () { skinShow(); }; }; }); //滚动 function nav() { var $liCur = $(".nav-box ul li.cur"), curP = $liCur.position().left, curW = $liCur.outerWidth(true), $slider = $(".nav-line"), $targetEle = $(".nav-box ul li:not('.last') a"), $navBox = $(".nav-box"); $slider.stop(true, true).animate({ "left":curP, "width":curW }); $targetEle.mouseenter(function () { var $_parent = $(this).parent(), _width = $_parent.outerWidth(true), posL = $_parent.position().left; $slider.stop(true, true).animate({ "left":posL, "width":_width }, "fast"); }); $navBox.mouseleave(function (cur, wid) { cur = curP; wid = curW; $slider.stop(true, true).animate({ "left":cur, "width":wid }, "fast"); }); } ; //滚动 function bnrSilder() { if (!$("#head").length && !$("#bnr").length) { return; } (function () { if (navigator.userAgent.toLocaleLowerCase().indexOf('opera') >= 0) return; var sstag = document.createElement('script'); sstag.type = 'text/javascript'; sstag.async = true; sstag.src = 'script/SmoothScroll.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sstag, s); })(); $(window).scroll(function () { var bTop = $(this).scrollTop(); $('.bnr-box').css({ 'margin-top':-bTop * 0.48 }); $('.bnr-txt').css({ 'margin-top':-bTop * 0.68 }); $('.bnr-btn').css({ 'margin-top':-bTop * 0.68 }); $('.warper').css({ "background-position":"50% " + bTop * 0.2 + "px" }); if (bTop < 200) { $(".txt-warp").css({ 'margin-top':-bTop * 1.5 }); $(".txt-nav-warp").removeAttr("style"); } else { $(".txt-warp").css({ 'margin-top':-240 }); $(".txt-nav-warp").css({ "position":"fixed", "top":0, "left":0, "box-shadow":"0 2px 6px #eee" }); } var idxs = 0; if (bTop >= 200 && bTop < 577) { idxs; } else if (bTop >= 577 && bTop < 1072) { idxs = 1; } else if (bTop >= 1072 && bTop < 1165) { idxs = 2; } else if (bTop >= 1165) { idxs = 3; } $('.txt-nav li a').eq(idxs).addClass('on').parent().siblings().children().removeClass ('on'); if (bTop < 200) { $('.txt-nav li a').removeClass('on'); } }); }; function sideSlider() { if (!$(".help-side dl").length) { return false; } var $aCur = $(".help-side dl").find(".cur a"), $targetA = $(".help-side dl dd a"), $sideSilder = $(".side-slider"), curT = $aCur.position().top - 3; $sideSilder.stop(true, true).animate({ "top":curT }); $targetA.mouseenter(function () { var posT = $(this).position().top - 3; $sideSilder.stop(true, true).animate({ "top":posT }, 240); }).parents(".help-side").mouseleave(function (_curT) { _curT = curT $sideSilder.stop(true, true).animate({ "top":_curT }); }); } ; function helpToggle() { if (!$(".help-cont dl dt a").length) { return; } var $targetEle = $(".help-cont dl dt a"); $targetEle.toggle(function () { $(this).parent().css({ "background-position":"0 -20px" }).siblings().slideDown(); return false; }, function () { $(this).parent().removeAttr("style").siblings().slideUp(); return false; }); } ; function systole() { if (!$(".history").length) { return; } var $warpEle = $(".history-date"), $targetA = $warpEle.find("h2 a,ul li dl dt a"), parentH, eleTop = []; parentH = $warpEle.parent().height(); $warpEle.parent().css({ "height":59 }); setTimeout(function () { $warpEle.find("ul").children(":not('h2:first')").each(function (idx) { eleTop.push($(this).position().top); $(this).css({ "margin-top":-eleTop[idx] }).children().hide(); }).animate({ "margin-top":0 }, 1600).children().fadeIn(); $warpEle.parent().animate({ "height":parentH }, 2600); $warpEle.find("ul").children(":not('h2:first')").addClass("bounceInDown").css({ "-webkit-animation-duration":"2s", "-webkit-animation-delay":"0", "-webkit-animation-timing-function":"ease", "-webkit-animation-fill-mode":"both" }).end().children("h2").css({ "position":"relative" }); }, 600); $targetA.click(function () { $(this).parent().css({ "position":"relative" }); $(this).parent().siblings().slideToggle(); $warpEle.parent().removeAttr("style"); return false; }); } ; })(jQuery);
2、CSS文件