Jquery数字上下滚动动态切换插件


Posted in Javascript onAugust 08, 2015

Jq打造的数字滚动插件,数字变化时,动态滚动切换,效果非常好。

我们先来看示例:

CSS

.textC {
 position:absolute;
 width:500px;
 overflow:hidden;
 margin-top: 100px;
 line-height:30px;
 margin-left: 300px;
 height:30px;
}
.textC span {
 color: #13BEEC;
 font-size: 28px;
 font-weight: bold;
 font-family: Georgia, "Times New Roman", Times, serif;
 position: absolute;
}

HTML

<div class="textC"></div>

<p style="text-align:center;"><a style="float:left; margin-left:300px; margin-top:200px;" href="javascript:void(0);" onClick="NumbersAnimate.ChangeNumber(NumbersAnimate.RandomNum(10000000,19999999));">随机切换数字</a>

</p>

JS

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 NumbersAnimate.Target=$(".textC");
 NumbersAnimate.Numbers=12389623;
 NumbersAnimate.Duration=1500;
 NumbersAnimate.Animate();
});
var NumbersAnimate={
 Target:null,
 Numbers:0,
 Duration:500,
 Animate:function(){
 var array=NumbersAnimate.Numbers.toString().split("");
 //遍历数组
 for(var i=0;i<array.length;i++){
  var currentN=array[i];
  //数字append进容器
  var t=$("<span></span>");
  $(t).append("<span class=\"childNumber\">"+array[i]+"</span>");
  $(t).css("margin-left",18*i+"px");
  $(NumbersAnimate.Target).append(t);
  //生成滚动数字,根据当前数字大小来定
  for(var j=0;j<=currentN;j++){
  var tt;
  if(j==currentN){
   tt=$("<span class=\"main\"><span>"+j+"</span></span>");
   }else{
   tt=$("<span class=\"childNumber\">"+j+"</span>");
  }
  $(t).append(tt);
  $(tt).css("margin-top",(j+1)*25+"px");
  }
  $(t).animate({marginTop:-((parseInt(currentN)+1)*25)+"px"},NumbersAnimate.Duration,function(){
  $(this).find(".childNumber").remove();
  });
 }
 },
 ChangeNumber:function(numbers){
 var oldArray=NumbersAnimate.Numbers.toString().split("");
 var newArray=numbers.toString().split("");
 for(var i=0;i<oldArray.length;i++){
  var o=oldArray[i];
  var n=newArray[i];
  if(o!=n){
   var c=$($(".main")[i]);
        var num=parseInt($(c).html());
   var top=parseInt($($(c).find("span")[0]).css("marginTop").replace('px', '')); 
   
   for(var j=0;j<=n;j++){
    var nn=$("<span>"+j+"</span>");
    if(j==n){
    nn=$("<span>"+j+"</span>");
    }else{
    nn=$("<span class=\"yy\">"+j+"</span>");
    }
    $(c).append(nn);
    $(nn).css("margin-top",(j+1)*25+top+"px");
   }
   var margintop=parseInt($(c).css("marginTop").replace('px', '')); 
   $(c).animate({marginTop:-((parseInt(n)+1)*25)+margintop+"px"},NumbersAnimate.Duration,function(){
    $($(this).find("span")[0]).remove();
    $(".yy").remove();
   });
  }
 }
 NumbersAnimate.Numbers=numbers;
 },
 
 RandomNum:function(m,a){
 var Range = a - m;  
    var Rand = Math.random();  
    return(m + Math.round(Rand * Range));  
 }
}
</script>

插件使用非常简单
1. 第一次调用时

NumbersAnimate.Target=$(".textC");
NumbersAnimate.Numbers=12389623;
NumbersAnimate.Duration=1500;
NumbersAnimate.Animate();

2. 如果数字改变了,再次调用就只需要调用Change函数即可

NumbersAnimate.ChangeNumber();

该插件有3个参数,分别是:

Target:数字的父级容器
Numbers:显示的数字
Duration:滚动速度,单位是毫秒

使用注意:当数字改变后调用Change方法时,需要保证改变后的数字和之前的数字位数一致。

Javascript 相关文章推荐
JQuery for与each性能比较分析
May 14 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
Jquery实现弹性滑块滑动选择数值插件
Aug 08 #Javascript
jQuery实现列表内容的动态载入特效
Aug 08 #Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 #Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 #Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 #Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 #Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 #Javascript
You might like
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
php实现倒计时效果
2015/12/19 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
python实现2048小游戏
2015/03/30 Python
python实现ping的方法
2015/07/06 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
python实现银行账户系统
2021/02/22 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
销售工作岗位职责
2013/12/24 职场文书
财经学院自荐信范文
2014/02/02 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
高中生物教学反思
2016/02/20 职场文书
Nginx 匹配方式
2022/05/15 Servers