1、引入jQuery

<script src="js/jquery.min.js"></script>
2、html

<div id="count">14</div>

3、js函数

  1. (function($){
  2. $.fn.numberRock=function(options){
  3. var defaults={
  4. lastNumber:100,  //最终值
  5. duration:2000,  //时间
  6. easing:'swing' //swing(默认 : 缓冲 : 慢快慢) linear(匀速的)
  7. };
  8. var opts=$.extend({}, defaults, options);
  9.  
  10. $(this).animate({
  11. num : "numberRock",
  12. // width : 300,
  13. // height : 300,
  14. },{
  15. duration : opts.duration,
  16. easing : opts.easing,
  17. complete : function(){
  18. console.log("success");
  19. },
  20. step : function(a,b){ //可以检测我们定时器的每一次变化
  21. //console.log(a);
  22. //console.log(b.pos); //运动过程中的比例值(0~1)
  23. $(this).html(parseInt(b.pos * opts.lastNumber));
  24. }
  25. });
  26.  
  27. }
  28.  
  29. })(jQuery);

4、js代码

$(function(){
  $("#counta").numberRock({
  lastNumber:14,
  duration:3000,
  easing:'swing', //慢快慢
  });
});

jquery 动态数字滚动的更多相关文章

  1. jQuery动态数字翻滚计数到指定数字的文字特效代码

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

  2. 用jQuery实现数字滚动效果

    html 部分 <div class="js-box box"></div> css 部分 .statistic .box{ display: inline ...

  3. jQuery 数字滚动插件

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

  4. 一款非常炫酷的jQuery动态随机背景滚动特效

    一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...

  5. jQuery数字滚动(模拟网站人气、访问量递增)原创

    插件描述:实现数字上下滚动,模拟网站人气.访问量递增的动画效果,兼容性如下: 使用方法 $(el).runNum(val,params);   参数详解 val:数值型(默认70225800): pa ...

  6. jquery 数字滚动方法

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

  7. jQuery+PHP+Ajax动态数字统计展示实例

    jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: <div ...

  8. jQuery.hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  9. 让数字变化炫酷起来,数字滚动Text组件[Unity]

    让数字滚动起来 上周我的策划又提了样需求,当玩家评分发生变动时,屏幕出现人物评分浮层UI,播放评分数字滚动动画.这类数字滚动需求非常常见,我就按一般思路,将startvalue与endvalue每隔一 ...

随机推荐

  1. API / DOM

    浏览器特性 当控制台报错时,IE9会停止执行JS.当打开控制台时会执行后续JS ------------------------------------------------------------ ...

  2. H5自动准备杂记

    由于之前没做过UI自动化,近期准备做H5自动化,要学的东西还是很多. 1.本地debug环境:android studio + android SDK(想要调试通要关注:驱动.手机开发者模式要打开) ...

  3. 关闭win10 自动更新 及蓝屏解决办法

    "控制面板-管理工具-服务"(或在"此电脑"鼠标右键,点击"管理"),找到Windows Update项目后,将"启动类型&quo ...

  4. Apache通过配置.htaccess文件禁止访问.git、.svn等目录

    如果你用过Git.SVN等代码版本控制工具的话,那肯定会知道,如果你需要拉去最新的代码到本地时,会自动生成一个.git或者.svn文件夹,里面包含一些项目相关的信息,如果在部署项目是,把这些文件公开暴 ...

  5. Linux命令:history

    显示历史(执行过的)命令. history [n] history -c history -d offset history -anrw [filename] history -p arg [arg ...

  6. php中的错误和异常

    总结: php错误不会抛出异常,因此不能被catch,但会根据配置写入日志文件或者输出到浏览器,所以可以通过日志文件查看错误 php异常都必须自己抛出,并通过catch捕捉.SQL语句执行的错误好像可 ...

  7. linux 覆盖可执行文件的问题

    测试环境是3.10.0 内核. 有一次操作中,发现cp -f A B执行的时候,行为不一样: 当B没被打开,则正常覆盖B. 当B是被打开,但没有被执行,则能覆盖, 当B被打开,且被执行,则不能直接覆盖 ...

  8. 在postgresqlz中查看与删除索引

    查看索引 select * from pg_indexes where tablename='tbname';      或者     select * from pg_statio_all_inde ...

  9. 【转】【java】论integer是地址传递还是值传递

    转自:http://www.tuicool.com/articles/AraaQbZ 论integer是地址传递还是值传递 Integer 作为传参的时候是地址传递 , 可以参考如下例子,在程序刚启动 ...

  10. Redis进阶实践之二如何在Linux系统上安装安装Redis(转载)(2)

    Redis进阶实践之二如何在Linux系统上安装安装Redis 一.引言 上一篇文章写了“如何安装VMware Pro虚拟机”和在虚拟机上安装Linux操作系统.那是第一步,有了Linux操作系统,我 ...