CSS3 + JS 数字滚动效果

roffer

已于 2023-02-01 09:21:39 修改

阅读量1.1k

点赞数 3

分类专栏： js vue3 文章标签： vue.js html css3 javascript es6

于 2020-09-15 17:13:01 首次发布

本文链接：https://blog.csdn.net/dulongfie/article/details/108599691

版权

vue3 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

原生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.itemClass
        child.className = this.option.childClass
        child.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

roffer

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
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> <scr.
复制链接

扫一扫