当前位置: 首页 > news >正文

JS+CSS实现数字滚动

最近在实现一个显示RGB颜色数值的动画效果时,尝试使用了writing-mode(书写模式)及 text-orientation来实现文字的竖直方向的排列,并借助CSS的transition(过渡)来实现动画效果。关于书写模式,参考链接[链接描述]1

各浏览器对writing-mode的支持情况,可在Can I use中查看,而对text-orientation的支持情况在Can I use中暂不能查到,根据笔者的测试,Chrome/FF/Opera均支持此样式,而IE/Edge都不支持。暂未在Safari中测试,欢迎各位补充。

首先,创建数字的容器。因为RGB颜色的范围是0~255,因此百位数字仅需1、2两个数字。

    <div class="num_span">
        <span class="right">0123456789</span>
        <span class="middle">0123456789</span>
        <span class="left">12</span>
    </div>

接下来添加其CSS样式,我们需要将文字的书写方向改为从上至下,且字符方向是竖直的。使用wrting-mode样式可以改变文字的书写方向,使用text-orientation可以实现行内字符的旋转。

    .num_span span {
        float: right;
        /* 书写模式 */
        writing-mode: vertical-rl;
        /* 控制行内字符的旋转 */
        text-orientation: upright;
    }

此时,效果如图
图片描述

然后我们将外层容器设置为over-flow:hidden,再添加一点JS即可实现数字的滚动效果。主要思路为,通过js分别得到数字个位、十位、百位上的数字,并改变对应的margin—top即可。需要注意的是,在数字小于10时,需额外处理一下十位数字的margin-top值,使十位上的数字隐藏。完整的代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RollingNumber</title>
    <style>
        .input_center{
            display: block;
            margin: 50px auto 0;
        }
        .num_span {
          border: 1px solid #911004;
          width: 64px;
          overflow: hidden;
          font-size: 20px;
          height: 20px;
          margin: 10px auto; 
        }
        .num_span span {
          float: right;
          width: 20px;
          /* 书写模式*/
          writing-mode: vertical-rl;
          /* 控制行内字符的旋转*/
          text-orientation: upright;
          margin-top: 0em; 
          -webkit-transition: margin-top 1.5s ease-out;
          -o-transition: margin-top 1.5s ease-out;
          transition: margin-top 1.5s ease-out;
        }
    </style>
</head>
<body>
    <input type="text" class="input_center" id="valueRGB" placeholder="请输入0-255之间的数字">
    <div class="num_span">

        <span class="right">0123456789</span>
        <span class="middle">0123456789</span>
        <span class="left">12</span>
    </div>
    
    <script src="jquery-1.11.3.js"></script>
    <script>
        function animate_RGB(rgb){
            let arr = [];
            arr.push(parseInt(rgb/100));
            arr.push(parseInt(rgb%100/10));
            arr.push(parseInt(rgb%10));
            let $div = $(".num_span");
            $div.find('.left').css('margin-top',-arr[0]+1+'em')
            $div.find('.middle').css('margin-top',-arr[1]+'em')
            $div.find('.right').css('margin-top',-arr[2]+'em');
            if(rgb<10){
              $div.find('.middle').css('margin-top','1em');
            }
        }
        $("#valueRGB").on("change",function(){
            let val = parseInt($(this).val());
            if(val>=0&&val<256){
                console.log(val);
                animate_RGB($(this).val());
            }
        });
    </script>
</body>
</html>

相关文章:

  • [Lucas定理]【学习笔记】
  • 转BFS
  • Linux学习之路(三)搜索命令
  • SQL--left join ,inner join, right jion, Limit
  • [译]持续集成认证(ContinuousIntegrationCertification)
  • linux ps -aux各列含义
  • mysql mpm
  • Ambari Metrics接收数据问题
  • reids 数据库学习
  • Android系统源码研究(一)
  • Node + FFmpeg 实现Canvas动画导出视频
  • 数据库架构设计思路
  • 前端学习 -- Css -- 文本标签
  • Android开发专业名词及工具概述
  • 斐波那契数列——摘自搜狗百科
  • (十五)java多线程之并发集合ArrayBlockingQueue
  • [笔记] php常见简单功能及函数
  • 【面试系列】之二:关于js原型
  • 【刷算法】从上往下打印二叉树
  • ES6 ...操作符
  • ES6--对象的扩展
  • Flex布局到底解决了什么问题
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • React-redux的原理以及使用
  • sublime配置文件
  • Windows Containers 大冒险: 容器网络
  • Xmanager 远程桌面 CentOS 7
  • 飞驰在Mesos的涡轮引擎上
  • 关于 Cirru Editor 存储格式
  • 聚簇索引和非聚簇索引
  • 力扣(LeetCode)21
  • 聊聊redis的数据结构的应用
  • 前端代码风格自动化系列(二)之Commitlint
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 浅谈web中前端模板引擎的使用
  • 世界上最简单的无等待算法(getAndIncrement)
  • 试着探索高并发下的系统架构面貌
  • 线上 python http server profile 实践
  • ###C语言程序设计-----C语言学习(3)#
  • #Z2294. 打印树的直径
  • $(selector).each()和$.each()的区别
  • %check_box% in rails :coditions={:has_many , :through}
  • (2022版)一套教程搞定k8s安装到实战 | RBAC
  • (6)【Python/机器学习/深度学习】Machine-Learning模型与算法应用—使用Adaboost建模及工作环境下的数据分析整理
  • (cos^2 X)的定积分,求积分 ∫sin^2(x) dx
  • (转)http协议
  • ***详解账号泄露:全球约1亿用户已泄露
  • .NET I/O 学习笔记:对文件和目录进行解压缩操作
  • .net经典笔试题
  • .Net下的签名与混淆
  • .NET与java的MVC模式(2):struts2核心工作流程与原理
  • .net与java建立WebService再互相调用
  • [100天算法】-x 的平方根(day 61)
  • [20190113]四校联考