js实现多行文字上下平滑切换

最新推荐文章于 2024-08-09 14:39:44 发布

@Sunshine710

最新推荐文章于 2024-08-09 14:39:44 发布

阅读量766

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/qq_62693649/article/details/128179342

版权

效果：

html代码：

注意，此处用行内样式，否则js中list.style.top取值为空

<div class="marquee">
        <ul id="list" style="top: 0;">  
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第3个</li>
            <li>我是第4个</li>
            <li>我是第5个</li>
        </ul>
    </div>

css代码:

样式没写多少，能看就行，hhh

    *{
        margin: 0;
        padding: 0;
    }
    .marquee{
        height:105px;
        overflow: hidden;
        position: relative;
    }
    #list{
        position: absolute;
    }

js代码：

当循环完毕一次返回时，需要用异步代码去在回到初始值后去执行下一次，否则会造成在初始值卡2次定时器
至于为什么用异步，因为同步的话transition值会被后面的再设置的值给覆盖掉
问题来了，有人知道为什么不能用Promise吗，我用promise发现log输出是异步的，但是transition值还是被覆盖了

function marquee(){
            let list=document.querySelector('#list'),
                length=list.children.length
                height=list.children[0].offsetHeight
                console.log(length,height);
            list.innerHTML+=list.innerHTML
            let timer=setInterval(()=>{
                if(parseInt(list.style.top)<=-(length*height)){
                    // let promise=new Promise(resolve=>{
                        list.style.transitionDuration='0s';
                        list.style.top='0px';
                        // resolve()
                    //     console.log(1)
                    // }).then(nextItem)
                    setTimeout(nextItem,100)  //改异步
                } 
                else nextItem()
            },3000)
            function nextItem(){
                list.style.transition= 'top 1s';
                list.style.top=(parseInt(list.style.top)-height)+'px'
            }
        }
        marquee()

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .marquee{
        height:105px;
        overflow: hidden;
        position: relative;
    }
    #list{
        position: absolute;
    }
</style>
<body>
    <div class="marquee">
        <ul id="list" style="top: 0;">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第3个</li>
            <li>我是第4个</li>
            <li>我是第5个</li>
        </ul>
    </div>
    <script>
        function marquee(){
            let list=document.querySelector('#list'),
                length=list.children.length
                height=list.children[0].offsetHeight
                console.log(length,height);
            list.innerHTML+=list.innerHTML
            let timer=setInterval(()=>{
                if(parseInt(list.style.top)<=-(length*height)){
                    // let promise=new Promise(resolve=>{
                        list.style.transitionDuration='0s';
                        list.style.top='0px';
                        // resolve()
                    //     console.log(1)
                    // }).then(nextItem)
                    setTimeout(nextItem,100)
                } 
                else nextItem()
            },3000)
            function nextItem(){
                list.style.transition= 'top 1s';
                list.style.top=(parseInt(list.style.top)-height)+'px'
            }
        }
        marquee()
    </script>
</body>
</html>