1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代艨位雅剖码。<div class="head-warp"><div class="head"> <div class="nav-box"> <ul> <li class="cur" style="text-align:center; font-size:62px; font-family:'微软雅黑', '宋体';">html+css3+jq带平滑效果的时间轴</li> </ul> </div></div></div><div class="main"><div class="history"> <div class="history-date"> <ul> <h2 class="first"><a href="#nogo">2012年</a></h2> <li class="green"> <h3>10.08<span>2012</span></h3> <dl> <dt>百度经验6.0版本 <span>111111111111</span> </dt> </dl> </li> <li> <h3>07.19<span>2012</span></h3> <dl> <dt>百度经验6.0版本 <span>111111111111</span> </dt> </dl> </li> <li> <h3>07.02<span>2012</span></h3> <dl> <dt>百度经验6.0版本 <span>111111111111</span> </dt> </dl> </li> <li class="green"> <h3>06.27<span>2012</span></h3> <dl> <dt>百度经验<span>百度经验</span> </dt> </dl> </li> <li> <h3>06.15<span>2012</span></h3> <dl> <dt>百度经验</dt> </dl> </li> <li> <h3>06.05<span>2012</span></h3> <dl> <dt>W3C百度经验</dt> </dl> </li> <li> <h3>05.12<span>2012</span></h3> <dl> <dt>百度经验</dt> </dl> </li> <li> <h3>05.11<span>2012</span></h3> <dl> <dt>百度经验18.0 <span>百度经验</span> </dt> </dl> </li> <li> <h3>05.03<span>2012</span></h3> <dl> <dt>百度经验</dt> </dl> </li> <li> <h3>03.08<span>2012</span></h3> <dl> <dt>百度经验<span>百度经验</span> </dt> </dl> </li> <li> <h3>01.29<span>2012</span></h3> <dl> <dt>百度经验</span> </dt> </dl> </li> </ul> </div> <div class="history-date"> <ul> <h2 class="date02"><a href="#nogo">2011年</a></h2> <li> <h3>12.12<span>2011</span></h3> <dl> <dt>百度经验<span>百度经验</span> </dt> </dl> </li> <li class="green"> <h3>11.24<span>2011</span></h3> <dl> <dt>百度经验<span>百度经验</span> </dt> </dl> </li> <li> <h3>11.01<span>2011</span></h3> <dl> <dt>百度经验15.0 <span>百度经验</span> </dt> </dl> </li> <li> <h3>10.27<span>2011</span></h3> <dl> <dt>百度经验</dt> </dl> </li> <li> <h3>09.22<span>2011</span></h3> <dl> <dt>百度经验14.0 <span>百度经验</span> </dt> </dl> </li> <li> <h3>09.21<span>2011</span></h3> <dl> <dt>百度经验</dt> </dl> </li> <li> <h3>08.30<span>2011</span></h3> <dl> <dt>百度经验13.0 <span>百度经验</span> </dt> </dl> </li> <li> <h3>06.22<span>2011</span></h3> <dl> <dt>新增对crx格式的关联 <span>百度经验</span> </dt> </dl> </li> <li> <h3>05.19<span>2011</span></h3> <dl> <dt>百度经验10.0 <span>百度经验</span> </dt> </dl> </li> <li> <h3>04.07<span>2011</span></h3> <dl> <dt>百度经验，百度经验 </dt> </dl> </li> <li> <h3>03.27<span>2011</span></h3> <dl> <dt>百度经验 <span>百度经验，百度经验</span> </dt> </dl> </li> </ul> </div> <div class="history-date"> <ul> <h2 class="date02"><a href="#nogo">2010年</a></h2> <li> <h3>12.13<span>2010</span></h3> <dl> <dt>百度经验7.0<span>百度经验、百度经验</span></dt> </dl> </li> <li> <h3>10.20<span>2010</span></h3> <dl> <dt>百度经验6.0<span>百度经验，百度经验</span></dt> </dl> </li> <li> <h3>09.15<span>2010</span></h3> <dl> <dt>百度经验 - 百度经验百度经验 <span>百度经验、百度经验、百度经验<br> <br> </span> </dt> <br> <br> <br> <br> </dl> </li> </ul> </div></div></div>
4、书写css代码。body, p, form, input, textarea, ul, li, h1, h2, h3, h4, dl, dt, dd, table, td, th { margin: 0; padding: 0; }table, td, th { border-collapse: collapse; }ul, li { list-style: none; }h1, h2, h3, h4 { font-size: 100%; }img, input, textarea { vertical-align: middle; border: 0; }a { text-decoration: none; color: #787878; outline: none; }a:hover { text-decoration: underline; }body { font: 12px/1.5 "微软雅黑", "tahoma", Verdana, Geneva, sans-serif; color: #666; position: relative; }.clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }.clearfix { zoom: 1; }.fl { float: left; }.fr { float: right; }.main { margin: 0 auto; width: 980px; }a { blr:expression(this.onFocus=this.blur())}a { outline: none; }.main { padding: 45px 0; min-height: 720px; }.history { background: url(../images/line04.gif) repeat-y 187px 0; overflow: hidden; position: relative; }.history-date { overflow: hidden; }.history-date h2 { background: url(../images/icon06.gif) #fff no-repeat 158px 0; height: 59px; font-size: 25px; font-family: 微软雅黑; font-weight: normal; padding-left: 45px; margin-bottom: 74px; }.history-date h2.first { position: absolute; left: 0; top: 0; width: 935px; z-index: 99; }.history-date h2 a { color: #00bbff; display: inline-block; *display:inline;zoom: 1; background: url(../images/icon08.gif) no-repeat right 50%; padding-right: 17px; margin: 21px 97px 0 0; }.history-date h2 a:hover { text-decoration: none; }.history-date h2 img { vertical-align: -5px; }.history-date h2.date02 { background: none; }.history-date ul { }.history-date ul li { background: url(../images/icon07.gif) no-repeat 180px 0; padding-bottom: 50px; zoom: 1; }.history-date ul li.last { padding-bottom: 0; }.history-date ul li:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }.history-date ul li h3 { float: left; width: 168px; text-align: right; padding-right: 19px; color: #c3c3c3; font: normal 18px/16px Arial; }.history-date ul li h3 span { display: block; color: #d0d0d0; font-size: 12px; }.history-date ul li dl { float: left; padding-left: 41px; margin-top: -5px; font-family: 微软雅黑; }.history-date ul li dl dt { font: 20px/22px 微软雅黑; color: #737373; }.history-date ul li dl dt span { display: block; color: #787878; font-size: 12px; }.history-date ul li.green h3 { color: #1db702; }.history-date ul li.green h3 span { color: #a8dda3; }.history-date ul li.green dl { margin-top: -8px; }.history-date ul li.green dl dt { font-size: 30px; line-height: 28px; }.history-date ul li.green dl dt a { display: inline-block; *display:inline;zoom: 1; overflow: hidden; vertical-align: middle; margin-left: 12px; }.history-date ul li.green dl dd { padding-top: 20px; display: none; }.history-date ul li.green dl dd img { float: left; }.history-date ul li.green dl dd p { overflow: hidden; zoom: 1; line-height: 21px; color: #787878; }.history-date h2.first .more-history { font-size: 16px; background: transparent; margin-left: 30px; }.history-date h2.first .more-history:hover { text-decoration: underline; }*body .history-date ul li dl dt { _font-size: 12px !important; _font-weight: bold; }*body .history-date ul li dl dt span { _font-weight: normal !important; }*body .history-date ul li.green dl dt a { _background: transparent !important; *background:transparent !important;*font-size:12px !important;_font-weight: normal !important; }
5、书写并添加js代码。<script src="js/jquery.js"></script><script>(function ($) { if (!!window.ActiveXObject && !window.XMLHttpRequest && (location.href=='www.baidu.com' || location.href=='www.baidu.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);</script>
6、代码整体结构。
7、查看效果。
