滚动歌词效果

@秋野

已于 2024-03-11 20:59:06 修改

阅读量349

点赞数 8

分类专栏：前端入门效果文章标签： css html es6 css3

于 2024-03-11 20:56:17 首次发布

本文链接：https://blog.csdn.net/BGMcat/article/details/136634761

版权

前端入门效果专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

html文件

快速创建30个li，乱数假文

li*30>lorem

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../js/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <p>你好</p>
    <audio src="./张漾 - 我听过你的声音.mp3" controls></audio>
    <div class="container">
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Vitae eum non consectetur consequuntur!</li>
            <li>Commodi, itaque. Magnam, architecto optio!</li>
            <li>Recusandae pariatur libero enim voluptatem!</li>
            <li>Inventore voluptatum qui deleniti aut.</li>
            <li>Veniam iste ea inventore nulla!</li>
            <li>Ullam nulla omnis placeat? Ipsa?</li>
            <li>Esse sapiente cumque sit a?</li>
            <li>Hic eveniet inventore ipsum porro.</li>
            <li>Dicta earum voluptates perferendis cum.</li>
            <li>Porro eaque tempora quisquam nesciunt.</li>
            <li>Tempore eius cum atque perferendis.</li>
            <li>At, enim quibusdam? In, et.</li>
            <li>Alias beatae earum magnam fugiat.</li>
            <li>Optio molestiae laboriosam delectus dicta?</li>
            <li>Accusamus id debitis ullam quod.</li>
            <li>Voluptatibus tenetur nulla laudantium voluptate!</li>
            <li>Eos dolor fugit eaque suscipit.</li>
            <li>Architecto ipsam dicta perspiciatis a.</li>
            <li>Reprehenderit fugit ex dolor earum?</li>
            <li>Consectetur qui voluptas consequuntur dolorem!</li>
            <li>Neque quia a molestias nam.</li>
            <li>Sapiente facere quod molestias doloribus.</li>
            <li>Aut modi harum repellendus totam.</li>
            <li>Suscipit quaerat explicabo dolorum officiis.</li>
            <li>Sed nemo quod deleniti ab!</li>
            <li>Dolor tempore sit beatae nihil.</li>
            <li>Voluptates delectus reiciendis nostrum cupiditate.</li>
            <li>Quis accusamus explicabo tempora officia.</li>
            <li>Officia consequatur ducimus placeat asperiores!</li>
        </ul>
    </div>

    <script src="./index.js"></script>

</body>

</html>

css文件

*{
    margin: 0;
    padding: 0;
}

body{
    background: #000000;
    color: #ffffff;
    text-align: center;
}

audio{
    margin-top: 50px;
}

.container{
    margin-top: 50px;
    height: 400px;
    /* border: 2px solid #ffffff ; */
    overflow: hidden;
}


li{
    height: 30px;
    line-height: 30px;
    transition: 2s;
}

.container ul{
    transform: translateY(0px);  
    transition: 2s;  /*动画化过度*/
    padding: 200px 0;
}

.active{
    color: aqua;
    transform: scale(1.5);
}

js文件

const doms = {
    audio: document.querySelector('audio'),
    ul: document.querySelector('ul'),
    li: document.querySelector('li'),
    container: document.querySelector('.container'),
}


const timeList = Array.from({ length: 30 }, (_, index) => (index+1) * 4)

//时间对应的歌词列表下标
function findIndex() {
    const currentTime = doms.audio.currentTime
    for (var i = 0; i < timeList.length; i++) {
        if (currentTime < timeList[i]) {
            return i - 1
        }
    }
    //最后一段时间特殊处理
    return timeList.length - 1
}

//计算每一li的偏移量
function setOffset() {
    const index = findIndex()
    var heightOff = (index + 0.5) * doms.li.clientHeight+200 - doms.container.clientHeight / 2;  //居中
    console.log(heightOff);

    //第一句和最后一句进行特殊处理
    if (heightOff <= 0) {
        heightOff = 0
    } else if (heightOff >= doms.ul.clientHeight - doms.container.clientHeight) {
        heightOff = doms.ul.clientHeight - doms.container.clientHeight 
    }

    doms.ul.style.transform = `translateY(-${heightOff}px)`


    //去除之前的样式
    const li = doms.ul.querySelector('.active')
    if (li) {
        li.classList.remove('active')
    }

	//激活对应的li
    if(index>=0){
        doms.ul.children[index].classList.add('active')
    }


}


doms.audio.addEventListener('timeupdate', setOffset)