1、准备好需要用到的图标。
2、新建html文档。
3、书写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> <p>111111111111111111</p> </div> <div class="cntl-icon cntl-center">'00</div> </div> <div class="cntl-state"> <div class="cntl-content"> <h4>Title 2</h4> <p>111111111111111111</p> </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> <p>111111111111111111</p> </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> <p>111111111111111111</p> </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> <p>111111111111111111</p> </div> <div class="cntl-image"><img src="img/a4.png"></div> <div class="cntl-icon cntl-center">'10</div> </div> </div> </div></div>
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; }}
5、书写并添加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>
6、书写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>
7、代码整体结构。
8、查看效果。
