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>JS+CSS实现数字滚动的更多相关文章
- Vue.js大屏数字滚动翻转效果
================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...
- js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下, js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 下面看看我的原始代码: & ...
- JavaScript 数字滚动countup.js
1. 概述 1.1 说明 在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成.此时使用countup.js就能够很方便的处理此类功能问题. 1.2 ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- jQuery数字滚动（模拟网站人气、访问量递增）原创
插件描述:实现数字上下滚动,模拟网站人气.访问量递增的动画效果,兼容性如下: 使用方法 $(el).runNum(val,params); 参数详解 val:数值型(默认70225800): pa ...
- 那些H5用到的技术（6）——数字滚动特效
前言原理源码使用方式补充CountUp.js 前言 会有这么一种情况,H5页面需要进行数字统计展示,以此来强调产品or工作的成果.如果只是静态显示一个数字,总是感觉生硬.对比如下: 是不是瞬间高大上了 ...
- jQuery 数字滚动插件
这几天闲来没事写的,有不对的地方还请多多指点 CSS: ; padding:0 2px;} .digital-beating i {;; background:url(../images/icon_0 ...
- 勤能补挫-简单But易错的JS&CSS问题总结
错误频率较高的JS&CSS问题 勤能补拙,不管是哪门子技术,在实践中多多总结,开发效率慢慢就会提升.本篇介绍几个经常出错的JS&CSS问题,包括事件冒泡.(使用offset.scrol ...
- js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
随机推荐
- Spring源码之七registerListeners()及发布订阅模式
Spring源码之七registerListeners()及发布订阅模式 大家好,我是程序员田同学. 今天带大家解读refresh()方法中的registerListeners()方法,也就是我们经常 ...
- 05-LoadBalancer负载均衡
1.介绍 目前主流的负载方案分为以下两种: 集中式负载均衡,在消费者和服务提供方中间使用独立的代理方式进行负载,有硬件的(比如 F5),也有软件的(比如 Nginx). 客户端根据自己的请求情况做负载 ...
- 惨，给Go提的代码被批麻了
hello大家好,我是小楼. 不知道大家还记不记得我上次找到了一个Go的Benchmark执行会超时的Bug?就是这篇文章<我好像发现了一个Go的Bug?>. 之后我就向Go提交了一个PR ...
- Kibana-CentOS7单机安装测试
一.是什么 Kibana 是为 Elasticsearch设计的开源分析和可视化平台.你可以使用 Kibana 来搜索,查看存储在 Elasticsearch 索引中的数据并与之交互.你可以很容易实现 ...
- 编写第一个GET、POST接口[renren-fast框架系列（1）]
配置好 renren-fast 脚手架,学习完 Spring MVC 架构后,我需要具体调试 renren-fast 的接口,比如要新增某个接口. 什么是前后端分离 运行 renren-fast 项目 ...
- Linux内核驱动模块编写尝试
课堂笔记 源代码 /*file: hello.c*/ #ifndef _KERNEL_ #define _KERNEL_ #endif #ifndef MODULE #define MODULE #e ...
- [WC2018]州区划分（FWT，FST）
[WC2018]州区划分(FWT,FST) Luogu loj 题解时间 经典FST. 在此之前似乎用到FST的题并不多? 首先预处理一个子集是不是欧拉回路很简单,判断是否连通且度数均为偶数即可. 考 ...
- Charles的安装及设置
1. Charles的安装 l 下载安装包 l 安装:按照提示信息一步步安装,不做多余解释 l 破解:将Charles.jar包放在安装目录,如D:\Program Files\Charles\ ...
- unittest 测试用例实现
unittest框架结构 test_case: 测试套件,每一个.py文件代表一个测试用例,测试用例以test开头,否则框架读取不到测试用例 __init__.py是做什么的? 要弄明白这个问题,首先 ...
- Golang之框架篇-Windows环境bee工具运行beego
bee工具简介及好处 bee 工具是一个为了协助快速开发 beego 项目而创建的项目,通过 bee 你可以很容易的进行 beego 项目的创建.热编译.开发.测试.和部署. 强烈推荐新手或J ...