最近在实现一个显示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>

JS+CSS实现数字滚动的更多相关文章

  1. Vue.js大屏数字滚动翻转效果

    ================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...

  2. js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下, js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 下面看看我的原始代码: & ...

  3. JavaScript 数字滚动countup.js

    1. 概述 1.1 说明 在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成.此时使用countup.js就能够很方便的处理此类功能问题. 1.2 ...

  4. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  5. jQuery数字滚动（模拟网站人气、访问量递增）原创

    插件描述:实现数字上下滚动,模拟网站人气.访问量递增的动画效果,兼容性如下: 使用方法 $(el).runNum(val,params);   参数详解 val:数值型(默认70225800): pa ...

  6. 那些H5用到的技术（6）——数字滚动特效

    前言原理源码使用方式补充CountUp.js 前言 会有这么一种情况,H5页面需要进行数字统计展示,以此来强调产品or工作的成果.如果只是静态显示一个数字,总是感觉生硬.对比如下: 是不是瞬间高大上了 ...

  7. jQuery 数字滚动插件

    这几天闲来没事写的,有不对的地方还请多多指点 CSS: ; padding:0 2px;} .digital-beating i {;; background:url(../images/icon_0 ...

  8. 勤能补挫-简单But易错的JS&CSS问题总结

    错误频率较高的JS&CSS问题 勤能补拙,不管是哪门子技术,在实践中多多总结,开发效率慢慢就会提升.本篇介绍几个经常出错的JS&CSS问题,包括事件冒泡.(使用offset.scrol ...

  9. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

随机推荐

  1. linux多进/线程编程（4）——进程间通信之pipe和fifo

    前言: Linux环境下,进程地址空间相互独立,每个进程各自有不同的用户地址空间.任何一个进程的全局变量在另一个进程中都看不到,所以进程和进程之间不能相互访问,要交换数据必须通过内核,在内核中开辟一块 ...

  2. TypeScript学习第二天：认识ts的数据类型

    目录 1,类型总览 2,基本类型 2.1,布尔 2.2,数字 2.3,字符串 2.4,Null 2.5,undefined 2.6,symbol 2.7,bigint 3,引用类型 3.1,数组 Ar ...

  3. java面试：java基础、Io、容器

    1.java基础 1.JDK 和JRE有什么区别 ​ JDK:java开发工具包,java开发运行环境.包含了JRE. ​ JRE:java运行环境,包含java虚拟机,java基础类库. 2.jav ...

  4. vue中使用keepAlice的各种问题

    项目需求:从项目列表页index,进入到列表的详情页detail,再从detail返回到index,需要缓存index的数据 在App.vue中的配置 <template> <div ...

  5. npm vue路由配置

    npm vue路由 复习:1.README.md文件:保存如何使用的命令 (1)     npm install:拷项目时可以不拷node_modules文件,运行该命令时,会自动下载node_mod ...

  6. 魅族mx3手机 固件升级方法

    1.正常手机刷机,升级固件的方法 我今天3.5升4.2.8都提示固件损坏 后来我找客服 一定要用电脑下3.8固件 然后按住开机和音量+ 进入刷机模式 然后连接电脑 电脑会给你一个900mb的磁盘 拉进 ...

  7. Redis 中的 set 和 sorted set 如何使用，源码实现分析

    set 和 sorted set 前言 set 常见命令 set 的使用场景 看下源码实现 insert dict sorted set 常见的命令 使用场景 分析下源码实现 ZADD ZRANGE ...

  8. springboot自定义启动图画

    小小娱乐,你是不是看到好多文章或段子上有这个 是不是很好玩,其实修改也很简单,就是在springboot的resources下新建一个banner.txt文件,将要输出图案放到txt文件中就好,启动时 ...

  9. Mysql学习笔记-临键锁实验

    前言 昨天同事跟我聊到一个问题:InnoDB里面间隙锁锁住的数据可以update么?我们经常都说间隙锁是InnoDB在RR隔离级别下防止幻读的一种处理手段.它可以防止数据在间隙范围中insert数据, ...

  10. loj2985「WC2019」I 君的商店(二分，思维)

    loj2985「WC2019」I 君的商店(二分,思维) loj Luogu 题解时间 真的有点猛的思维题. 首先有一个十分简单的思路: 花费 $ 2N $ 确定一个为 $ 1 $ 的数. 之后每次随 ...