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

来源：互联网 2023-03-16 23:54:27 版权归原作者所有，如有侵权，请联系我们

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

工具/原料

adobe dreamweaver

方法/步骤

准备好需要用到的图标。

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

1本页面未经许可获取自百度经验

新建html文档。

书写hmtl代码。

div class="jq22-container">

div class="cntl"> span class="cntl-bar cntl-center"> span class="cntl-bar-fill">/span> /span>

div class="cntl-states">

div class="cntl-state">

div class="cntl-content">

h4>Title 1/h4>

111111111111111111/

/div>

div class="cntl-icon cntl-center">'00/div>

/div>

div class="cntl-state">

div class="cntl-content">

h4>Title 2/h4>

111111111111111111/

/div>

div class="cntl-image">img src="img/a1.png">/div>

div class="cntl-icon cntl-center">'03/div>

/div>

div class="cntl-state">

div class="cntl-content">

h4>Title 3/h4>

111111111111111111/

/div>

div class="cntl-image">img src="img/a2.png">/div>

div class="cntl-icon cntl-center">'04/div>

/div>

div class="cntl-state">

div class="cntl-content">

h4>Title 4/h4>

111111111111111111/

/div>

div class="cntl-image">img src="img/a3.png">/div>

div class="cntl-icon cntl-center">'07/div>

/div>

div class="cntl-state">

div class="cntl-content">

h4>Title 5/h4>

111111111111111111/

/div>

div class="cntl-image">img src="img/a4.png">/div>

div class="cntl-icon cntl-center">'10/div>

/div>

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

书写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动态响应式时间轴代码

书写并添加js代码。

script src="js/jquery.min.js">/script>

script src="lib/jquery.cntl.js">/script>

script >

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

$('.cntl').cntl({

revealbefore: 300,

anim_class: 'cntl-animate',

onreveal: function(e){

console.log(e);

}

});

/script>

书写jqueryjs代码。

script>

(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动态响应式时间轴代码

代码整体结构。

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

查看效果。

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

注意事项

jquery.min.js是个js包，可以网上下载。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS HTML JQUERY

上一篇：html+css+jQuery新闻公告间歇滚动特效下一篇：html5+css3+jquery漂浮抖动的导航

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

工具/原料

方法/步骤

注意事项

热门文章

标签列表