​桐乡网站推广【桐乡官网推广哪个效果好】桐乡百度竞价推广托管、桐乡百度优化推广外包、桐乡全网霸屏推广多少钱、桐乡网络推广一年大概多少费

准备好需要用到的图标。

新建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>

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

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

}

书写并添加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> 

代码整体结构。

查看效果。