首先为了截出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. python类型-集合

    集合对象是一组无序排列的可哈希的值,集合成员可以做字典的键.集合有两种类型:可变集合,可以添加和删除元素,可变集合不是可哈希的,不能用作字典的键也不能作为其它集合中的元素:不可变集合相反,有哈希值,可 ...

  2. 约束路由 用正则表达式约束路由 Constraining a Route Using a Regular Expression 精通ASP-NET-MVC-5-弗瑞曼

  3. orm 锁 和 事务

    一 锁 锁的语句 select_for_update() 原生sql语句select * from t1 for update django 语句models.T1.objects.select_fo ...

  4. Web自动化测试项目（七）日志

    一.日志作用 调试程序 了解系统程序运行的情况,是否正常 系统程序运行故障分析与问题定位 用来做用户行为分析和数据统计 二.为项目添加日志 └── utils ├── log_utils.py └── ...

  5. 基于Flask框架搭建视频网站的学习日志（三）之原始web表单

    基于Flask框架搭建视频网站的学习日志(三)1.原始Web 表单 本节主要用于体验一下前端后端直接数据的交互,样例不是太完善,下一节会加入Flash处理,稍微完善一下页面 (备注:建议先阅读廖雪峰老 ...

  6. Centos 7 最小化时间服务部署配置

    基本原理 Centos 7 我所了解有两种时间服务,NTPD与chronyd:两者对Centos 7 的支持都很好,有对chrony非常夸赞的,不过我这里只讲ntpd:有对chrony有想法的可以自行 ...

  7. C++ 对TXT 的串并行读写

    任务说明:有36篇文档,现在要读入,并统计词频,字典长度25,希望能够比较串并行读写操作的时间差距. 串行读入并统计词频 // LoadDocsInUbuntu.cpp // #include < ...

  8. C++基类和派生类的构造函数

    派生类不能继承基类的构造函数,若想通过派生类来对基类的private的变量成员进行初始化则需要: 通过派生类的构造函数来调用基类的构造函数完成基类成员变量的初始化. 看下面的例子: #include ...

  9. Ajax等待返回结果时,弹出一个友好的等待提示

    巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. 具体可参考j ...

  10. LoadRunner参数传递给参数

    需求:使用随机函数时,需要参数化某个参数,并且后面的步骤需要使用这个参数. 方法: lr_save_string 该函数主要是将程序中的常量或变量保存为lr中的参数 lr_eval_string 从参 ...