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如何实现点击时高亮显示代码
Jan 22 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 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
Terran建筑一览
2020/03/14 星际争霸
phpMyAdmin 安装及问题总结
2009/05/28 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
srcElement表格样式
2006/09/03 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
python tkinter界面居中显示的方法
2018/10/11 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
Python List cmp()知识点总结
2019/02/18 Python
Python中字符串List按照长度排序
2019/07/01 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
基于python图像处理API的使用示例
2020/04/03 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
关于.NET, HTML的五个问题
2012/08/29 面试题
七年级音乐教学反思
2014/01/26 职场文书
益达广告词
2014/03/14 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
企业消防安全责任书
2014/07/23 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
地道战观后感300字
2015/06/04 职场文书
大学入学感言
2015/08/01 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
2022微信温控新功能上线
2022/05/09 数码科技
JavaScript前端面试组合函数
2022/06/21 Javascript
mysql序号rownum行号实现方式
2022/12/24 MySQL