html+css+jQuery动态响应式时间轴代码

2025-10-14 21:12:01

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

2、新建html文档。

3、书写hmtl代码。

<h4>Title 1</h4>

111111111111111111

</div>

</div>

<h4>Title 2</h4>

111111111111111111

</div>

</div>

<h4>Title 3</h4>

111111111111111111

</div>

</div>

<h4>Title 4</h4>

111111111111111111

</div>

</div>

<h4>Title 5</h4>

111111111111111111

</div>

</div>

html+css+jQuery动态响应式时间轴代码

4、书写css代码。

body { font-family: Arial; }

.cntl { position: relative; width: 100%; overflow: hidden; }

.cntl-center { left: 0; right: 0; margin-left: auto; margin-right: auto; }

.cntl-bar { position: absolute; width: 10px; top: 0; bottom: 0; background-color: #ccc; box-shadow: inset 0px 0px 7px -2px #000; }

.cntl-bar-fill { background-color: #009ABB; position: absolute; left: 0; right: 0; top: 0; height: 0; }

.cntl-state { position: relative; width: 100%; min-height: 200px; margin-bottom: 50px; }

.cntl-state::after { display: block; content: ' '; clear: both; }

.cntl-icon { border-radius: 50%; width: 80px; height: 80px; background-color: #00313C; border: solid 3px #009ABB; box-shadow: 0px 0px 19px -9px #000; position: absolute; top: 0; text-align: center; line-height: 80px; font-size: 40px; color: #fff; }

.cntl-content { width: 40%; padding: 2%; background-color: rgba(238, 238, 238, 0.25); border-radius: 8px; border-bottom: solid 3px #009ABB; float: left; opacity: 0; position: relative; margin-left: -40%; }

.cntl-state:nth-child(2n+2) .cntl-content { float: right; margin-right: -40%; }

.cntl-image { opacity: 0; width: 40%; padding: 2%; }

.cntl-state:nth-child(2n+1) .cntl-image { float: right; }

.cntl-image img { width: 100%; }

.cntl-content h4 { font-size: 20px; font-weight: normal; margin-bottom: 10px; }

.cntl-bar-fill, .cntl-content, .cntl-image { -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; }

.cntl-state:nth-child(2n+2).cntl-animate .cntl-content { margin-right: 0%; }

.cntl-animate .cntl-content { opacity: 1; margin-left: 0%; }

.cntl-animate .cntl-image { opacity: 1; }

@media (max-width: 600px) {

.cntl-bar { left: auto; right: 37px; }

.cntl-content { width: 80%; float: none; }

.cntl-state:nth-child(2n+2) .cntl-content { margi-right: 0%; float: none; }

.cntl-image { width: 80%; }

.cntl-state:nth-child(2n+1) .cntl-image { float: none; }

.animate .cntl-content { margin-left: 2%; }

.cntl-icon { left: auto; right: 0; }

}

html+css+jQuery动态响应式时间轴代码

5、书写并添加js代码。

$(document).ready(function(e){

$('.cntl').cntl({

revealbefore: 300,

anim_class: 'cntl-animate',

onreveal: function(e){

console.log(e);

}

});

</script>

6、书写jqueryjs代码。

(function($) {

$.fn.cntl = function( options ) {

var settings = $.extend({

revealbefore : 200,

anim_class : 'cntl-animate',

onreveal : null

}, options);

return this.each( function() {

var statelist = $(this).find('.cntl-state');

var bar_fill = $(this).find('.cntl-bar-fill');

var states = [];

var tbf = 0;

function setupElements( )

{

for (var i = 0; i < statelist.length; i++) {

states[i] = {};

states[i]['top'] = $(statelist[i]).offset().top + settings.revealbefore;

states[i]['elm'] = $(statelist[i]);

};

revealElements();

}

function revealElements( )

{

var windowtop = $(window).scrollTop();

var windowbtm = windowtop + $(window).height();

for( var i = 0; i < states.length; i++) {

if( states[i].top > windowtop && states[i].top < windowbtm )

{

if (

!states[i].elm.hasClass( settings.anim_class ) &&

$.isFunction( settings.onreveal ) )

{

settings.onreveal.call( this, states[i].elm );

}

states[i].elm.addClass( settings.anim_class );

var h = states[i].elm.position().top;

if( h > tbf )

{

tbf = h;

}

bar_fill.height( tbf );

}

};

}

$(window).on('scroll',revealElements);

$(window).on('load',setupElements)

});

}

}(jQuery));

</script>

html+css+jQuery动态响应式时间轴代码

7、代码整体结构。

html+css+jQuery动态响应式时间轴代码

8、查看效果。

html+css+jQuery动态响应式时间轴代码

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