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语句中的CDATA标签的意义
May 09 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
Javascript之Date对象详解
Jun 07 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
php常用表单验证类用法实例
2015/06/18 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
js实现拖拽功能
2017/03/01 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
python读取excel表格生成erlang数据
2017/08/26 Python
深入浅析Python传值与传址
2018/07/10 Python
浅谈Python的list中的选取范围
2018/11/12 Python
Python变量访问权限控制详解
2019/06/29 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
写出一个方法实现冒泡排序
2016/07/08 面试题
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
师德演讲稿范文
2014/05/06 职场文书
离职证明范本
2015/06/12 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle