jquery 动态数字滚动
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 动态数字滚动的更多相关文章
- jQuery动态数字翻滚计数到指定数字的文字特效代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 用jQuery实现数字滚动效果
html 部分 <div class="js-box box"></div> css 部分 .statistic .box{ display: inline ...
- jQuery 数字滚动插件
这几天闲来没事写的,有不对的地方还请多多指点 CSS: ; padding:0 2px;} .digital-beating i {;; background:url(../images/icon_0 ...
- 一款非常炫酷的jQuery动态随机背景滚动特效
一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...
- jQuery数字滚动(模拟网站人气、访问量递增)原创
插件描述:实现数字上下滚动,模拟网站人气.访问量递增的动画效果,兼容性如下: 使用方法 $(el).runNum(val,params); 参数详解 val:数值型(默认70225800): pa ...
- jquery 数字滚动方法
jquery 数字滚动方法用的是countUp.js这个插件 target = 目标元素的 ID:startVal = 开始值:endVal = 结束值:decimals = 小数位数,默认值是0:d ...
- jQuery+PHP+Ajax动态数字统计展示实例
jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: <div ...
- jQuery.hhLRSlider 左右滚动图片插件
/** * jQuery.hhLRSlider 左右滚动图片插件 * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com ...
- 让数字变化炫酷起来,数字滚动Text组件[Unity]
让数字滚动起来 上周我的策划又提了样需求,当玩家评分发生变动时,屏幕出现人物评分浮层UI,播放评分数字滚动动画.这类数字滚动需求非常常见,我就按一般思路,将startvalue与endvalue每隔一 ...
随机推荐
- Python基础4 迭代器、装饰器、软件开发规范
本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 孩子,我现在有个需 ...
- Mybatis:通过MapperScannerConfigurer进行mapper扫描
在applicationContext.xml里配置的
- pycharm使用技巧 + 调试程序-12
Pycharm使用技巧 系出名门:JetBrains 集成开发环境:IDE 功能: Project视图.代码结构视图 代码导航 语法高亮.自动补齐.错误提示.自动修复 代码重构 主流开发框架的支持(D ...
- Eclipse集成SonarLint
https://docs.sonarqube.org/display/PLUG/Writing+Custom+Java+Rules+101
- jquery元素使用
特殊用法: var formFields = $([]).add(_ele1).add(_ele2); 可将多个元素整合到一个集合中 1.has方法 has()方法查找自己,has为子集条件,即包含 ...
- Seaweed-FS综合使用测试(转)
2016-03-16 12:17:48 Seaweed-FS综合使用测试 参考信息 https://github.com/chrislusf/seaweedfs/ https://bintray. ...
- 数据结构:Queue
Queue设计与实现 Queue基本概念 队列是一种特殊的线性表 队列仅在线性表的两端进行操作 队头(Front):取出数据元素的一端 队尾(Rear):插入数据元素的一端 队列不允许在中间部位进行操 ...
- 【转】 DOTA2中的伪随机及其lua实现
因为单纯的随机确实会影响到竞技性,所以dota2引入的是伪随机机制,在大量的技能中,比如说混沌的混乱之箭.剑圣的剑舞.冰女的冰霜领域之类的技能,都利用了伪随机机制. 而纯随机,或者标准正态分布并不会因 ...
- SED命令用法整理
sed '/Started/'q 匹配到Started字符串则退出sed命令 sed '/Started/{/in/q}' 同时匹配到Started和in两个字符时则退出sed命令 ------- ...
- Zookeeper 在Linux系统的安装
注册中心Zookeeper 官方推荐使用 zookeeper 注册中心.注册中心负责服务地址的注册与查找,相当于目录服务,服务提供者和消费者只在启动时与注册中心交互,注册中心不转发请求,压力较小. Z ...