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

GifCam： https://www.appinn.com/gifcam/

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

主要就是依赖这个脚本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>

效果图

随着页面滚动，数字自动增大的jquery特效的更多相关文章

  1. jQuery页面滚动数字增长插件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. AngularJS 实现页面滚动到底自动加载数据的功能

    要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序ht ...

  3. AngularJS：实现页面滚动到底自动加载数据的功能

    要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序ht ...

  4. IOS HTML5页面中数字自动变蓝并识别为手机号

    开发HTML5的项目时发现页面元素为一串数字时,IOS手机会默认显示成蓝色字体,并且添加下划线,点击数字时会提示是否识别为手机号. 解决此问题的方法很简单,在head标签中添加下面的meta标记即可解 ...

  5. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  6. 页面滚动动态加载数据，页面下拉自动加载内容 jquery

    <!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...

  7. Jquery页面滚动动态加载数据，页面下拉自动加载内容

    <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...

  8. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  9. 10款无限滚动自动翻页jquery插件

    2012年3月29日 无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的 结果,改变了一直以来只能通过点击下一页来翻页 ...

随机推荐

  1. LeetCode动画 | 1038. 从二叉搜索树到更大和树

    今天分享一个LeetCode题,题号是1038,标题是:从二分搜索树到更大和数. 题目描述 给出二叉搜索树的根节点,该二叉树的节点值各不相同,修改二叉树,使每个节点 node 的新值等于原树中大于或等 ...

  2. python + selenium定位页面元素的办法

    1.什么是Selenium,为什么web测试,大家都用它? Selenium设计初衷就是为web项目的验收测试再开发.内核使用的是javaScript语言编写,几乎支持所以能运行javaScript的 ...

  3. LightningChartJS网页图表代码示例--Lineseries线性图

    下面的代码给出了lightningchart JS一个基本线性图的使用范例.线性图在笛卡尔坐标上绘制,表现两个变量之间的关系.直线段连接成数据点,线性图将信息作为这些数据点显示出来.一般用来显示数据变 ...

  4. 超越队西柚考勤系统——beta冲刺3

    一.成员列表 姓名 学号 蔡玉蓝(组长) 201731024205 郑雪 201731024207 何玉姣 201731024209 王春兰 201731024211 二.SCRUM部分 (1)各成员 ...

  5. FileZilla 报错“the server's certificate is unknown”

    FileZilla 是非常好用的一款FTP SFTP 管理工具. 但是filezilla会报错“the server's certificate is unknown” 并且会在window中看到以下 ...

  6. jdk for centos7

    https://www.cnblogs.com/chy123/p/6750351.html

  7. k8s概述

    k8s概述 概述 Kubernetes 使你在数以千计的电脑节点上运行软件时就像所有这些节点是单个大节点一样.它将底层基础设施抽象,这样做同时简化了应用的开发.部署, 以及对开发和运维团队的管理. K ...

  8. Selenium(一)：元素定位

    一.Selenium 8种定位方式 baidu.html <form id="form" name="f" action="/s" c ...

  9. Shiro Web集成及拦截器机制(四)

    Shiro与 Web 集成 Shiro 提供了与 Web 集成的支持,其通过一个 ShiroFilter 入口来拦截需要安全控制的 URL,然后进行相应的控制,ShiroFilter 类似于如 Str ...

  10. 浅析YYCache

    一.前言 读优秀的源码,对自己的提升还是很快的,无论是考虑问题的角度,还是编码能力. 带着问题读源码的,学习效率更高,可以暂时先定几个小问题,带着问题,去思考为什么作者这样弄,是否有替换方案? 1). ...