插件描述：实现数字上下滚动，模拟网站人气、访问量递增的动画效果，兼容性如下：

使用方法

$(el).runNum(val,params);
 

参数详解

val：数值型(默认70225800)；

parameters：对象({addMin(随机最小值),addMax(随机最大值),interval(动画间隔),speed(动画滚动速度),width(列宽),height(行高)})

可直接查看源文件，样式及位置可自己修改CSS即可！

源码如下：

 (function ($) {

        /*jQuery对象添加  runNum  方法*/

        $.fn.extend({

            /*

                *    滚动数字

                *    @ val 值，    params 参数对象

                *    params{addMin(随机最小值),addMax(随机最大值),interval(动画间隔),speed(动画滚动速度),width(列宽),height(行高)}

            */

            runNum:function (val,params) {

                /*初始化动画参数*/

                var valString = val || '70225800'

                var par= params || {};

                var runNumJson={

                    el:$(this),

                    value:valString,

                    valueStr:valString.toString(10),

                    width:par.width || 40,

                    height:par.height || 50,

                    addMin:par.addMin || 10000,

                    addMax:par.addMax || 99999,

                    interval:par.interval || 3000,

                    speed:par.speed || 1000,

                    width:par.width || 40,

                    length:valString.toString(10).length

                };

                $._runNum._list(runNumJson.el,runNumJson);

                $._runNum._interval(runNumJson.el.children("li"),runNumJson);

            }

        });

        /*jQuery对象添加  _runNum  属性*/

        $._runNum={

            /*初始化数字列表*/

            _list:function (el,json) {

                var str='';

                for(var i=0; i<json.length;i++){

                    var w=json.width*i;

                    var t=json.height*parseInt(json.valueStr[i]);

                    var h=json.height*10;

                    str +='<li style="width:'+json.width+'px;left:'+w+'px;top: '+-t+'px;height:'+h+'px;">';

                    for(var j=0;j<10;j++){

                        str+='<div style="height:'+json.height+'px;line-height:'+json.height+'px;">'+j+'</div>';

                    }

                    str+='</li>';

                }

                el.html(str);

            },

            /*生成随即数*/

            _random:function (json) {

                var Range = json.addMax - json.addMin;

                var Rand = Math.random();

                var num=json.addMin + Math.round(Rand * Range);

                return num;

            },

            /*执行动画效果*/

            _animate:function (el,value,json) {

                for(var x=0;x<json.length;x++){

                    var topPx=value[x]*json.height;

                    el.eq(x).animate({top:-topPx+'px'},json.speed);

                }

            },

            /*定期刷新动画列表*/

            _interval:function (el,json) {

                var val=json.value;

                setInterval(function () {

                    val+=$._runNum._random(json);

                    $._runNum._animate(el,val.toString(10),json);

                },json.interval);

            }

        }

    })(jQuery);

实例如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>数字滚动效果 jQuery插件</title>

     <style type="text/css">

         body{

             margin: 0;

             padding: 0;

             font-size: 14px;

             background-color: #F6F6F6;

             font-weight: normal;

             font-family: "Microsoft YaHei";

             color: #333333;

         }

         .runNum{

             margin: 0 auto;

             padding: 0;

             overflow: hidden;

             height: 50px;

             line-height: 50px;

             border-top: #CCCCCC solid 1px;

             border-bottom: #CCCCCC solid 1px;

             text-align: center;

             font-weight: bold;

             position: relative;

         }

         .runNum>li{

             list-style: none;

             width: 40px;

             float: left;

             position: absolute;

         }

     </style>

 </head>

 <body>

 <h2 style="text-align: center;">数字滚动效果 jQuery插件</h2>

 <div style="margin: 50px auto;width: 320px;font-size:44px;">

     <ul class="runNum" id="test"></ul>

 </div>

 <h4 style="text-align: center;">&copy;2017 helang版权所有</h4>

 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

 <script type="text/javascript">

     (function ($) {

         /*jQuery对象添加  runNum  方法*/

         $.fn.extend({

             /*

                 *    滚动数字

                 *    @ val 值，    params 参数对象

                 *    params{addMin(随机最小值),addMax(随机最大值),interval(动画间隔),speed(动画滚动速度),width(列宽),height(行高)}

             */

             runNum:function (val,params) {

                 /*初始化动画参数*/

                 var valString = val || '70225800'

                 var par= params || {};

                 var runNumJson={

                     el:$(this),

                     value:valString,

                     valueStr:valString.toString(10),

                     width:par.width || 40,

                     height:par.height || 50,

                     addMin:par.addMin || 10000,

                     addMax:par.addMax || 99999,

                     interval:par.interval || 3000,

                     speed:par.speed || 1000,

                     width:par.width || 40,

                     length:valString.toString(10).length

                 };

                 $._runNum._list(runNumJson.el,runNumJson);

                 $._runNum._interval(runNumJson.el.children("li"),runNumJson);

             }

         });

         /*jQuery对象添加  _runNum  属性*/

         $._runNum={

             /*初始化数字列表*/

             _list:function (el,json) {

                 var str='';

                 for(var i=0; i<json.length;i++){

                     var w=json.width*i;

                     var t=json.height*parseInt(json.valueStr[i]);

                     var h=json.height*10;

                     str +='<li style="width:'+json.width+'px;left:'+w+'px;top: '+-t+'px;height:'+h+'px;">';

                     for(var j=0;j<10;j++){

                         str+='<div style="height:'+json.height+'px;line-height:'+json.height+'px;">'+j+'</div>';

                     }

                     str+='</li>';

                 }

                 el.html(str);

             },

             /*生成随即数*/

             _random:function (json) {

                 var Range = json.addMax - json.addMin;

                 var Rand = Math.random();

                 var num=json.addMin + Math.round(Rand * Range);

                 return num;

             },

             /*执行动画效果*/

             _animate:function (el,value,json) {

                 for(var x=0;x<json.length;x++){

                     var topPx=value[x]*json.height;

                     el.eq(x).animate({top:-topPx+'px'},json.speed);

                 }

             },

             /*定期刷新动画列表*/

             _interval:function (el,json) {

                 var val=json.value;

                 setInterval(function () {

                     val+=$._runNum._random(json);

                     $._runNum._animate(el,val.toString(10),json);

                 },json.interval);

             }

         }

     })(jQuery);

 </script>

 <script type="text/javascript">

     $("#test").runNum(52013141);

 </script>

 </body>

 </html>

文章来源：

http://www.jq22.com/jquery-info16526

jQuery数字滚动（模拟网站人气、访问量递增）原创的更多相关文章

  1. jquery 数字滚动方法

    jquery 数字滚动方法用的是countUp.js这个插件 target = 目标元素的 ID:startVal = 开始值:endVal = 结束值:decimals = 小数位数,默认值是0:d ...

  2. jQuery 数字滚动插件

    这几天闲来没事写的,有不对的地方还请多多指点 CSS: ; padding:0 2px;} .digital-beating i {;; background:url(../images/icon_0 ...

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

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

  4. jQuery防京东浮动网站楼层导航代码

    jQuery防京东浮动网站楼层导航代码   <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ...

  5. Vue.js大屏数字滚动翻转效果

    ================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...

  6. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  7. Flexslider - 响应式的 jQuery 内容滚动插件

    FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...

  8. Jquery控制滚动显示欢迎字幕v2

    Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...

  9. 10款很好用的 jQuery 图片滚动插件

    jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...

随机推荐

  1. Node.js的模块系统

    编写稍大一点的程序时一般都会将代码模块化.Node.js提供了一个简单的模块系统.模块既可能是一个文件,也可能是包含一个或多个文件的目录. 模块的创建  如果模块是个文件,一般将代码合理拆分到不同的J ...

  2. 开源的API文档工具框架——Swagger简介

    初次接触Swagger是在2017年5月,当时公司正好要对整套系统架构进行重新设计,有同事推荐用这个技术框架来规范后台接口的API文档.当时因为架构重构,涉及改造的技术点太多,一时也就没太多精力,把S ...

  3. GBT MBR

    MBR最大支持2.2TB磁盘,它无法处理大于2.2TB容量的磁盘.MBR还只支持最多4个主分区——如果你想要更多分区,你需要创建所谓“扩展分区”,并在其中创建逻辑分区. GPT的全称是Globally ...

  4. MinGW GCC 6.3.0 2017年3月份出炉啦

    MSYS_MinGW-w64_GCC_630_x86-x64_Full 发布日期: 2017-03-07 08:48 68264 KB 下载地址: http://xhmikosr.1f0.de/too ...

  5. ECC加密算法入门介绍 --- 看雪

    标 题:ECC加密算法入门介绍 作 者:zmworm 时 间:2003/05/04 08:32pm 链 接:http://bbs.pediy.com ECC加密算法入门介绍 作者  :ZMWorm[C ...

  6. Django 笔记（四）模板标签 ~ 自定义过滤器

    模板标签: 标签在渲染的过程中提供任意的逻辑 语法: 由{% ... %} 和 {% end... %} 常用标签: with:类似取别名 模版继承: Django模版引擎中最强大也是最复杂的部分就是 ...

  7. react native 打包Ignoring return value of function declared with warn_unused_result attribute

    从 github上下载 项目 用于学习查看别人的代码, 当执行完npm install  用xcode 打开 发现俩个错误提示Ignoring return value of function dec ...

  8. Java 8 中的 Lambda 表达式

    Lambda 表达式是 Java 8 最受欢迎的功能.人们将函数式编程的概念引入了 Java 这门完全面向对象的命令式编程语言. 关于函数式编程是如何运作的,这个话题超出了本文的范围,不过我们会提炼出 ...

  9. kafka 的安装部署

    Kafka 的简介: Kafka 是一款分布式消息发布和订阅系统,具有高性能.高吞吐量的特点而被广泛应用与大数据传输场景.它是由 LinkedIn 公司开发,使用 Scala 语言编写,之后成为 Ap ...

  10. svn上check下来的项目，用idea打开，菜单栏没有svn工具解决办法

    1.用idea打开你的项目(idea已经配置过小乌龟了) 2.菜单栏点击VCS,Enable Version Control Integration... 3.选择Subversion 4.这时候,菜 ...