html+css3+jq带平滑效果的时间轴

2025-11-05 20:47:07

1、准备好需要用到的图标。

2、新建html文档。

html+css3+jq带平滑效果的时间轴

3、书写hmtl代码。

<ul>

<li class="cur" style="text-align:center; font-size:62px; font-family:'微软雅黑', '宋体';">html+css3+jq带平滑效果的时间轴</li>

</ul>

</div>

<ul>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

<dt>W3C百度经验</dt>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

</ul>

</div>

<ul>

<li>

<dl>

</dl>

</li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

<dt>新增对crx格式的关联 <span>百度经验</span> </dt>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

</ul>

</div>

<ul>

<li>

<dl>

</dl>

</li>

<li>

<dl>

</dl>

</li>

<li>

<dl>

<dt>百度经验 - 百度经验百度经验 <span>百度经验、百度经验、百度经验<br>

<br>

</span> </dt>

<br>

</dl>

</li>

</ul>

</div>

html+css3+jq带平滑效果的时间轴

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; }

html+css3+jq带平滑效果的时间轴

5、书写并添加js代码。

(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>

html+css3+jq带平滑效果的时间轴

6、代码整体结构。

html+css3+jq带平滑效果的时间轴

7、查看效果。

html+css3+jq带平滑效果的时间轴

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。