CSS3 + JS 数字滚动效果

原生JS+CSS3版：

<!DOCTYPE html>
<html>
<head><title>CSS3 数字滚动效果</title>
</head>
<body><div id="number-box"></div><script type="text/javascript" src="scrollnumber.js"></script><script type="text/javascript">window.onload = ()=>{let option = {selector: '#number-box',//要插入的元素位置itemClass: 'screen-number',childClass: 'screen-number-item',speed: '2s',//滚动速度value: '789'}scrollNumber(option)}</script>
</body>
</html>

function scrollNumber(option) {this.defaultOption = {selector: 'body',itemClass: 'screen-number',childClass: '',value: '123'}this.option = Object.assign(this.defaultOption, option)let itemStyle = {background: '#555',borderRadius:'.2rem',position: 'relative',padding: '.5rem',marginRight: '.3rem',color: '#66FFFF',fontSize: '1.5rem',fontWeight: 'bold',fontFamily: 'BigNoodleTitling',writingMode: 'vertical-lr',textOrientation: 'upright',overflow: 'hidden',display: 'flex !important',height: '3rem',width: '2rem',display: 'flex',alignItems: 'center',justifyContent: 'center'}let childStyle = {position: 'absolute',top: '1.4rem',letterSpacing: '1.4rem',transition: `all ${this.option.speed||'2s'}`}let target = document.querySelector(this.option.selector)target.style.display = 'flex'let valueArr = this.option.value.split('')valueArr.forEach(value => {let item = document.createElement('span')let child = document.createElement('span')item.className = this.option.itemClasschild.className = this.option.childClasschild.innerText = '0123456789'for (let key in itemStyle) item.style[key] = itemStyle[key]for (let key in childStyle) child.style[key] = childStyle[key]item.appendChild(child)target.appendChild(item)setTimeout(() => {child.style.transform = `translate(0,${-value * 10}%)`}, 50)})
}

Vue 版：

https://gitee.com/roffer-d/scroll-number.git

CSS3 + JS 数字滚动效果相关推荐

js数字滚动效果组件
因为在网上没有找到想要的效果,因此自己整了一个简单的.有需要的可以自己拿去改,需要引入jquery. gif录制太麻烦了,就不搞了,放个图片意会一下调用方式 // 第一个参数elementId:元素 ...
CSS3简单实现，数字滚动效果
之前项目要做一个数字滚动效果. 因为需要一直滚动且过一段时间就要滚动,网上早的不太满足,而且为0也滚动,用css+jq写了一下. 首先每一个数字拆成单个数字. 我这边9个数字,根据自己需要添加. /* ...
js、jQuery实现数字滚动效果
一.效果(监听页面滚动使得超过屏幕的数字每次出现都有数字滚动效果) 二.代码在滚动数字的标签上加上类名counter <div class="about_right flex5&qu ...
html数字自动滚动代码怎么写,你可能需要这样的大屏数字滚动效果
大屏数字滚动效果来源于最近工作中一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 思路在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤, ...
【网站】数字滚动效果的实现方法
代码如下: HTML部分: <div class="box Counter"><ul class="clearfix"><li&g ...
初级开发者福音：手把手教你实现数字滚动效果~
文章目录一.前言二.背景知识三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件一.前言前端数字滚动显示的场景很多, ...
vue数字滚动效果组件
数字滚动变化效果组件效果预览体验地址用途大屏展示,数字滚动效果实现使用js控制元素移动. 关键代码如下: //修改 chang(oldVal,newVal,id){if(oldVal & ...
jQuery数字滚动效果
jQuery数字滚动效果## 引入jQuery <script src="js/jquery.min.js"></script> body <div ...
vue做数字滚动效果
vue实现数字滚动效果近期在做项目的时候,产品要求实现数字滚动效果如下: 用jquery实现 html: <div class="develop"> <!--滚 ...

CSS3 + JS 数字滚动效果

原生JS+CSS3版：

Vue 版：

CSS3 + JS 数字滚动效果相关推荐

最新文章

热门文章