您正在使用IPV4(54.161.98.96)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 情人节 18
2022年 元宵节 19
2023年 元 旦 339
2022年 春 节 5
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    JavaScript实现余额数字滚动效果
    内容摘要: /***实现数字滚动的效果的类*/classDigitScroll{constructor(options){//获取容器的DOM,没有则抛出错误this.container=document.querySelector(options.container);if(!this.container){throwError('nocontainer');}thi......
    /**

    *实现数字滚动的效果的类

    */

    classDigitScroll{

    constructor(options){

    //获取容器的DOM,没有则抛出错误

    this.container=document.querySelector(options.container);

    if(!this.container){

    throwError("nocontainer");

    }

    this.container.style.overflow="hidden";

    this.container.style.display="flex";

    //可视容器高度也是滚动间隔距离,容器要设置高度,否则默认30px

    this.rollHeight=parseInt(getComputedStyle(this.container).height)||30;

    this.container.style.height=this.rollHeight+"px";

    }

    roll(num){

    //将传入的要滚动的数字拆分后初始化每一位数字的容器

    this.initDigitEle(num);

    constnumEles=this.container.querySelectorAll(".single-num");

    //遍历生成每一位数字的滚动队列,如滚动到7,则生成内容为0,1,2,3,4,5,6,7的7个div,用于滚动动画

    [...numEles].forEach((numEle,index)=>{

    constcurNum=0;

    lettargetNum=Number(this.numberArr[index]);

    if(curNum>=targetNum){

    targetNum=targetNum+10;

    }

    letcirNum=curNum;

    //文档碎片,拼凑好后一次性插入节点中

    constfragment=document.createDocumentFragment();

    //生成从0到目标数字对应的div

    while(targetNum>=cirNum){

    constele=document.createElement("div");

    ele.innerHTML=cirNum%10;

    cirNum++;

    fragment.appendChild(ele);

    }

    numEle.innerHTML="";

    numEle.appendChild(fragment);

    //重置位置

    numEle.style.cssText+=

    "-webkit-transition-duration:0s;-webkit-transform:translateY(0)";

    setTimeout(()=>{

    numEle.style.cssText+=`-webkit-transition-duration:1s;-webkit-transform:translateY(${

    -(targetNum-curNum)*this.rollHeight

    }px);`;

    },50);

    });

    }

    //初始化容器

    initDigitEle(num){

    //数字拆分位数

    constnumArr=num.toString().split("");

    //文档碎片,拼凑好后一次性插入节点中

    constfragment=document.createDocumentFragment();

    numArr.forEach((item)=>{

    constel=document.createElement("div");

    //数字是要滚动的,非数字如.是不滚动的

    if(/[0-9]/.test(item)){

    el.className="single-num";

    el.style.height=this.rollHeight+"px";

    el.style.lineHeight=this.rollHeight+"px";

    }else{

    el.innerHTML=item;

    el.className="no-move";

    el.style.verticalAlign="bottom";

    }

    //el.style.float='left';

    fragment.appendChild(el);

    },[]);

    this.container.innerHTML="";

    this.container.appendChild(fragment);

    //存储滚动的数字

    this.numberArr=numArr.filter((item)=>/[0-9]/.test(item));

    }

    }

    上一篇:一段css代码让弹窗在页面中居中 下一篇:js实现数字滚动特效
    发布日期:2021/12/24
    手机扫二维码直达本页
    发布时间:12:33:42
    点击:246
    录入:壹家怡园
    相关文章
    Baidu
    YiJiaCMS 6.1.0.10988 Build 21.12.28(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护

    Copyright©2000-2022