随着页面滚动，数字自动增大的jquery特效

2022-11-14 16:56:48

首先为了截出gif图，我下载了一个小工具

主要就是依赖这个脚本script.js

// JavaScript Document

$.fn.countTo = function (options) {

        options = options || {};

        return $(this).each(function () {

            // set options for current element

            var settings = $.extend({}, $.fn.countTo.defaults, {

                from:            $(this).data('from'),

                to:              $(this).data('to'),

                speed:           $(this).data('speed'),

                refreshInterval: $(this).data('refresh-interval'),

                decimals:        $(this).data('decimals')

            }, options);

            // how many times to update the value, and how much to increment the value on each update

            var loops = Math.ceil(settings.speed / settings.refreshInterval),

                increment = (settings.to - settings.from) / loops;

            // references & variables that will change with each update

            var self = this,

                $self = $(this),

                loopCount = 0,

                value = settings.from,

                data = $self.data('countTo') || {};

            $self.data('countTo', data);

            // if an existing interval can be found, clear it first

            if (data.interval) {

                clearInterval(data.interval);

            }

            data.interval = setInterval(updateTimer, settings.refreshInterval);

            // initialize the element with the starting value

            render(value);

            function updateTimer() {

                value += increment;

                loopCount++;

                render(value);

                if (typeof(settings.onUpdate) == 'function') {

                    settings.onUpdate.call(self, value);

                }

                if (loopCount >= loops) {

                    // remove the interval

                    $self.removeData('countTo');

                    clearInterval(data.interval);

                    value = settings.to;

                    if (typeof(settings.onComplete) == 'function') {

                        settings.onComplete.call(self, value);

                    }

                }

            }

            function render(value) {

                var formattedValue = settings.formatter.call(self, value, settings);

                $self.html(formattedValue);

            }

        });

    };

    $.fn.countTo.defaults = {

        from: 0,               // the number the element should start at

        to: 0,                 // the number the element should end at

        speed: 1000,           // how long it should take to count between the target numbers

        refreshInterval: 100,  // how often the element should be updated

        decimals: 0,           // the number of decimal places to show

        formatter: formatter,  // handler for formatting the value before rendering

        onUpdate: null,        // callback method for every time the element is updated

        onComplete: null       // callback method for when the element finishes updating

    };

    function formatter(value, settings) {

        return value.toFixed(settings.decimals);

    }

  // custom formatting example

  $('#count-number').data('countToOptions', {

    formatter: function (value, options) {

      return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');

    }

  });

function count1(options) {

 document.getElementById('dt').style.display = "block"; //鎺у埗鐩掑瓙鏄剧ず

}

  function count(options) {

    var $this = $(this);

    options = $.extend({}, options || {}, $this.data('countToOptions') || {});

    $this.countTo(options);

  }

使用时首先在页面引入jquery.js和script.js

给要动画的元素添加 timer 类，data-to 表示最终到达的数字， data-speed 表示动画速度

<h2 class="timer" data-to="1000" data-speed="4000">1000</h2>

调用时的脚本

<script type="text/javascript">

    $('.timer').each(count)

    $('.timer').each(count1);

</script>

接下来是完整的页面

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>demo</title>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/script.js"></script>

</head>

<body>

<h2 class="timer" data-to="1000" data-speed="4000">1000</h2>

<script type="text/javascript">

    $('.timer').each(count)

    $('.timer').each(count1);

</script>

</body>

</html>

当然我这个比较丑，找了个好看的demo

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>demo</title>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/script.js"></script>

<style>

@charset "utf-8";

/* CSS Document */

/*时间人数开始*/

.time{ width:100%; height:298px; float:left; background:url(images/timebg.png) no-repeat center; background-size:cover;}

.time_content{ width:1200px; height:298px; margin:0 auto;}

.time_left{ width:40%; max-width:480px; float:left; height:298px;}

.time_left h1{ width:100%; float:left; height:24px; line-height:24px; font-size:22px; text-align:center; color:#FFF; font-weight:400; margin-top:96px;}

.time_left h2{ width:100%; float:left; height:56px; line-height:56px; font-size:54px; text-align:center; color:#FFF; margin-top:12px; font-weight:bold;}

.time_right{ width:60%; max-width:720px; height:298px; float:left;}

.wrapper { width: 630px; height:90px; float:left; margin-left:100px; margin-top:110px; display:none;}

.wrapper1{ width:200px; float:left; height:90px;}

.wrapper2{ width:200px; float:left; height:90px; margin-left:20px; border-right:1px solid #FFF; border-left:1px solid #FFF;}

.wrapper3{ width:200px; float:left; height:90px;}

.counter { color:#ffe400; border-radius: 5px;}

.time1{ width:100px; height:54px; float:left;}

.time1 h1{ float:left;}

.time1 h2{ float:left;}

.time2{ width:70px; height:54px; float:left; margin-left:50px;}

.time3{ width:100px; height:54px; float:left; text-align:center;margin-left:40px;}

.timex{ width:50px; height:30px; margin-top:24px;color:#FFF; float:left;}

.timey{ width:200px; float:left; color:#FFF;}

.wrapper2 .timey{ width:148px; margin-left:52px; float:left;}

.wrapper3 .timey{ width:152px; margin-left:48px; float:left;}

.count-title { font-weight: normal; text-align: center; }

.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }

/*时间人数结束*/

</style>

</head>

<body>

<div class="time">

    <div class="time_content">

        <div class="time_left">

            <h1>真实数据&nbsp;放心选择</h1>

            <h2>专注学历教育15年</h2>

        </div>

        <div class="time_right">

            <div class="wrapper" id="dt">

                <div class="wrapper1">

                    <div class="counter col_fourth time1">

                      <h2 class="timer count-title" data-to="300000" data-speed="2000">300000</h2>

                    </div>

                    <div class="timex">以上</div>

                    <div class="timey">付费学员</div>

                 </div>

                 <div class="wrapper2">

                    <div class="counter col_fourth time2">

                      <h2 class="timer count-title" data-to="107" data-speed="2000">107</h2>

                    </div>

                    <div class="timex">家</div>

                    <div class="timey">地区分部</div>

                 </div>

                 <div class="wrapper3">

                    <div class="counter col_fourth time3">

                      <h2 class="timer count-title" data-to="1000" data-speed="2000">1000</h2>

                    </div>

                    <div class="timex">多人</div>

                    <div class="timey">教研团队</div>

                 </div>

            </div>

            <script type="text/javascript">

                 $('.timer').each(count)

                 $('.timer').each(count1);

            </script>

        </div>

    </div>

</div>

<script type="text/javascript">

    $('.timer').each(count)

    $('.timer').each(count1);

</script>

</body>

</html>

效果图

码农公寓

相关文章