首先为了截出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. Flsak学习笔记（1）

    Day 01 最近项目里要用python写后端,同学推荐了flask框架就来学一学.写这个博客的目的主要是记录一下自己学习的内容,有基础知识忘了不用一个个去百度,还有就是跟大家分享一下,有不是很容易理 ...

  2. python类型-字典

    字典是python语言中唯一的映射类型,映射对象里哈希值(键,key)和指向的对象(值,value)是一对多的关系.一个字典对象是可变的,是一个容器类型,可存储任意个数的python对象,其中也可以包 ...

  3. 如梦令编程语言发布 (RML)

    如梦令编程语言是在Rebol语言核心语法的基础上,做了一些自以为是的修改而来.谨以此为Rebol语法的传承,略尽绵薄之力. 基本概念 如梦令语言分属Lisp语系,代码本身是一个层层嵌套的Token列表 ...

  4. 小程序--->scroll-view组件不能触发相应滚动事件

    小程序scroll-view组件不能触发相应滚动事件 在制作加载更多时会发现不能触发相应事件,一般情况下首先要查看两个必要的属性scroll-view的高度是否设置,第二就是scroll-view的滚 ...

  5. centos7中修改运行级别

    centos6 在centos6里打开vim /etc/inittab文件看到下面有一行 id:5:initdefault,因此我们可以通过修改这个文件的id后的数字来修改运行级别 如果我们想要直接切 ...

  6. Linux学习笔记-centos查看版本号和内核信息

    1.查看centos系统版本号: 打开终端窗口: cat /etc/redhat-release 2.查看Linux内核版本信息: uname -a 或者 在图形化桌面右上角点开设置,在设置窗口选择详 ...

  7. 3、IP地址划分

    划分子网方法:1.你所选择的子网掩码将会产生多少个子网?:2 的x 次方(x 代表被借走的主机位数)2.每个子网能有多少主机?: 2 的y 次方-2(y 代表被借走之后剩余的主机位数)3.块大小:bl ...

  8. FFMPEG学习----使用SDL构建音频播放器

    ffmpeg版本:ffmpeg-20160413-git-0efafc5 #include <stdio.h> #include <stdlib.h> #include < ...

  9. Spring Boot自动装配原理源码分析

    1.环境准备 使用IDEA Spring Initializr快速创建一个Spring Boot项目 添加一个Controller类 @RestController public class Hell ...

  10. HDU_5057_分块

    http://acm.hdu.edu.cn/showproblem.php?pid=5057 分块,保存每个块中每位对应数字的和,复杂的是getmum,左右下标所在的块不能直接读取block数组,要重 ...