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 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
详解Angular5 服务端渲染实战
Jan 04 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
简单聊聊TypeScript只读修饰符
Apr 06 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
Linux编译升级php的详细方法
2013/11/04 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
Python脚本实现虾米网签到功能
2016/04/12 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
详解django三种文件下载方式
2018/04/06 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Django中信号signals的简单使用方法
2019/07/04 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
小班下学期评语
2014/05/04 职场文书
体育专业自荐书
2014/05/29 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
个人租房协议书
2014/11/28 职场文书
民主生活会汇报材料
2014/12/15 职场文书
街道社区活动报告
2015/02/05 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB