js+css数字滚动

最新推荐文章于 2024-06-24 15:18:02 发布

是可爱的大福呀~

最新推荐文章于 2024-06-24 15:18:02 发布

阅读量290

点赞数

文章标签： css javascript css3

本文链接：https://blog.csdn.net/henghahouhei/article/details/127907696

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="renderer" content="webkit">
    <title>CSS3 数字滚动效果</title>
</head>
<body>
<div id="test1"></div>


<script type="text/javascript">
    window.onload = ()=>{
        let option = {
            selector: '#test1',//要插入的元素位置
            itemClass: 'screen-number',
            childClass: 'screen-number-item',
            speed: '3s',//滚动速度
            value: '215'
        }

        scrollNumber(option)
    }
    function scrollNumber(option) {
        this.defaultOption = {
            selector: 'body',
            itemClass: 'screen-number',
            childClass: '',
            value: '123'
        }

        this.option = Object.assign(this.defaultOption, option)

        let itemStyle = {
            background: '#333333',
            borderRadius:'.2rem',
            position: 'relative',
            padding: '.5rem',
            marginRight: '.3rem',
            color: '#ff00ff',
            fontSize: '1.5rem',
            fontWeight: 'bold',
            fontFamily: 'BigNoodleTitling',
            writingMode: 'vertical-lr',
            textOrientation: 'upright',
            overflow: 'hidden',
            display: 'flex !important',
            height: '3rem',
            width: '2rem',
            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)
        })
    }
</script>
</body>
</html>