1、引入jQuery

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

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

3、js函数

(function($){
$.fn.numberRock=function(options){
var defaults={
lastNumber:100,  //最终值
duration:2000,  //时间
easing:'swing' //swing(默认 : 缓冲 : 慢快慢) linear(匀速的)
};
var opts=$.extend({}, defaults, options); $(this).animate({
num : "numberRock",
// width : 300,
// height : 300,
},{
duration : opts.duration,
easing : opts.easing,
complete : function(){
console.log("success");
},
step : function(a,b){ //可以检测我们定时器的每一次变化
//console.log(a);
//console.log(b.pos); //运动过程中的比例值(0~1)
$(this).html(parseInt(b.pos * opts.lastNumber));
}
}); } })(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. 对比各节点host 与 标准节点host差异脚本

    把各节点host拷贝到一台节点 这可以采用读主机名配置的方式 我这里偷懒了 echo 'starting' ssh hadoop01 "cp /etc/hosts ~/hadoop01-ho ...

  2. Angular.js实现分页

    一.编写angularJS实现的分页js(网上搜)和样式表(pagination),并在页面引入 二.编写变量和方法 //分页控件控制 $scope.paginationConf={ currentP ...

  3. centos7系统分区方案

    个人认为:硬盘如果够大,可以单独划分一个data盘,以防止rm -rf / Centos 7.2基础安装和配置(含分区方案建议) 参考网站:  https://www.cnblogs.com/set- ...

  4. Android内存泄漏原因

    这段时间调试APP的时候,发现程序在加载了过多的bitmap后会崩溃.查看了日志,原来是发生了内存溢出(OOM).第一次遇到这样的问题,那就慢慢排查吧. 内存优化可以参考胡凯大神的博客Android内 ...

  5. djangobb之forum.topics

    看djangobb源代码时,看到view的show_forum(request, forum_id, full=True)时,对于topics = forum.topics.order_by('-st ...

  6. date命令的用法

    date +%F data +%w, date +%W cal date -d "-1 years" +%F date -d "-1 hour" +%T 时间与 ...

  7. Centos下lnmp正确iptables配置规则

    查看iptable运行状态 service iptables status 清除已有规则 iptables -Fiptables -Xiptables -Z 开放端口 #允许本地回环接口(即运行本机访 ...

  8. 捷微jeewx , 免费开源(java)微信公众账号管家系统发布

    JeeWx, 微信管家平台,简称"捷微". 捷微是一款免费开源的JAVA微信公众账号开发平台.  平台介绍: 一.捷微Jeewx简介 Jeewx是一个开源.高效.敏捷的微信开发平台 ...

  9. 08-认识margin

    1.margin margin:外边距的意思.表示边框到最近盒子的距离. /*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top ...

  10. JSP页面java代码报错:Purgoods cannot be resolved to a type

    错误提示 : Purgoods cannot be resolved to a type Purgoods不能解析为一个类型 原因 : 缺少引入Purgoods类 页面中引入java类,执行java代 ...