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 相关文章推荐
json简单介绍
Jun 10 Javascript
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 Javascript
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 5.0对象模型深度探索之绑定
2006/09/05 PHP
PHP脚本的10个技巧(4)
2006/10/09 PHP
E路文章系统PHP
2006/12/11 PHP
php5.2时间相差8小时
2007/01/15 PHP
PHP 彩色文字实现代码
2009/06/29 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
布同 统计英文单词的个数的python代码
2011/03/13 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
python下10个简单实例代码
2017/11/15 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
出纳岗位职责
2013/11/09 职场文书
未婚证明格式
2015/06/15 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
新手初学Java List 接口
2021/07/07 Java/Android