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. Jenkins 简单配置

      安装就不说了, 因为安装实在是很简单的. Jenkins基础配置 配置jdk 和maven 进入Global Tool Configuration, 配置JDK: 一般不要选择自动安装, 否则下载 ...

  2. 彻底关闭Windows Defender丨Win10

    关闭Windows Defender Win10正式版怎么关闭windows defender 首先关闭windows defender,因重启电脑后win10 会自动重启defender,所以需要禁 ...

  3. 爬虫--Scrapy-基于RedisSpider实现的分布式爬虫

    爬取网易新闻 需求:爬取的是基于文字的新闻数据(国内,国际,军事,航空) 先编写基于scrapycrawl 先创建工程 scrapy startproject 58Pro cd 58Pro 新建一个爬 ...

  4. html 基础之a标签的属性target解析

    学习前端,有很多标签其实有很多不同的功能,但是用到的不多,所以就没有发现:当发现的时候,觉得很不可思议,有耳目一新的感觉.例如a 标签,之前只是知道,使用a标签,可以打开一个链接,然后访问一个新的页面 ...

  5. 基于官方镜像MySQL做自定义业务扩充镜像

    转自:https://www.cnblogs.com/jsonhc/p/7809571.html 首先从https://hub.docker.com/_/mysql/拉取官方镜像,如果速度缓慢,建议添 ...

  6. 一种比较low的linux的hung分析

    在调试一个功能的时候,发现了两种hung,以前认为的hung肯定是softlock导致的,后来才发现不一定要有lock这种结构,但是有类似于锁的功能的时候,也可能触发hung,为了避免大家走弯路,故记 ...

  7. PHP面向对象(抽象类与抽象方法、接口的实现)

    一.抽象类与抽象方法 1,任何一个类,如果它里面至少有一个方法是被声明为抽象的,那么这个类就必须被声明为抽象的. 2,定义为抽象的类不能被实例化. 3, 被定义为抽象的方法只是声明了其调用方式(参数) ...

  8. js 替换字符串中所有匹配的字符

    var str = 'abcadeacf'; var str1 = str.replace('a', 'o'); alert(str1); // 打印结果: obcadeacf var str2 = ...

  9. vue项目遇到的坑

    一.启动项目问题 1. 如何从git上拉下项目:点我  2. 启动项目失败: 点我 and 点我 二.搭建项目问题 1. 先改分辨率,否则可能影响布局 以我的项目为例,分辨率修改位置如下: 2. .v ...

  10. 关于网上“强大的vim”矫正!!

    参考链接在这里: 强大的vim配置文件,让编程更随意 - ma6174 - 博客园, http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393. ...