文章目录

原生js实现文字滚动效果

文字滚动效果

文字滚动效果需求：

这是一个比较简单的小案例，就是文字上下滚动出来，有这个过渡效果就行了。
直接开干

代码：

html和css

比较简单，直接上代码

html:
<!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>文字滚动效果</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="container">
        <div class="left nav-left">
            <p>文字滚动效果</p>
        </div>
        <ul class="left">
            <li>欢迎你！</li>
            <li>北京欢迎你！</li>
            <li>安徽欢迎你！</li>
            <li>合肥欢迎你！</li>
        </ul>
    </div>
    <script src="./index.js"></script>
</body>

</html>
css:
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    background-color: cadetblue;
    overflow: hidden;
    padding: 20px 0px;
}

.left {
    float: left;
}

.nav-left p {
    font-size: 15px;
    padding-left: 20px;
    margin-top: 10px;
    border-right: 2px solid blue;
    padding-right: 20px;
}

ul {
    padding-left: 30px;
    list-style: none;
    height: 40px;
    overflow: hidden;
}

ul li {
    height: 40px;
    line-height: 40px;
}

js

js部分也是比较好写的，我们只要获取到ul的dom，先把ul中第一项复制一下然后重新添加进ul中，等于多加一项，然后就可以开始动画部分
首先是定义计时器的时间，然后是每一个li的高度，然后设置一个计时器，以及当前显示的li，然后计时器中的函数写第一次的高度，最终的高度，以及li改变的高度，等等，这一部分再代码中有体现，我就不多介绍了，直接上代码了。

js:
// 封装一个获取dom的函数
function $(selector) {
    return document.querySelector(selector);
}
(function() {
    // 获取ul的dom
    var item = $('ul');
    // console.log(item);
    function newItem() {
        // 获取第一个li
        var newitem = item.children[0];
        // console.log(newitem);
        // 复制获取的第一个li
        var newli = newitem.cloneNode(true);
        // console.log(newli);
        // 添加进ul
        item.appendChild(newli);
        // console.log(item);
    }
    newItem();

    /**动画 */
    // 定义计时器的时间
    var interval = 1000;
    setInterval(moveNext, interval);
    // 每一个li的高度
    var itemHeight = 40;
    // 当前显示的li
    var currentli = 0;
    // 列表滚动到下一项
    function moveNext() {
        // 第一次的高度
        var form = itemHeight * currentli;
        // li变为下一个
        currentli++;
        // li改变后的高度
        var formli = itemHeight * currentli;
        // 变化的总时间
        var totalTime = 400;
        // 变化一次的时间
        var oneTime = 20;
        // 变化的次数
        var changeNumber = totalTime / oneTime;
        // 变化高度
        var changeAmount = (formli - form) / changeNumber;
        // 计时器
        var timerId = setInterval(function() {
            form += changeAmount;
            if (form >= formli) {
                clearInterval(timerId);
                if (currentli === item.children.length - 1) {
                    form = 0;
                    currentli = 0;
                }
            }
            item.scrollTop = form;
        }, oneTime)
    }
})();

若有错误，敬请指正

# javascript
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟