js实现文字向上自动循环滚动

最新推荐文章于 2024-05-13 01:08:40 发布

萝卜头888

最新推荐文章于 2024-05-13 01:08:40 发布

阅读量4.5k

点赞数 2

分类专栏： js 文章标签： css html5 javascript

本文链接：https://blog.csdn.net/wocao2dai/article/details/120413151

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

实现这个效果，需要注意给装文字的盒子，设置一个高度；还有外部的大盒子设置一个高度，向上滚动是用了scrollTop，通过设置偏移量，实现文字向上滚动。

详细代码

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 190px;
            border: 1px solid red;
            margin: 0 auto;
            overflow: hidden;
        }
        p{
            width: 200px;
            height: 970px;
            /* border: 1px solid black; */
        }
    </style>
</head>
<body>
    <div>
        <p>
            谁还在听着天气台
            你脸上阴晴，谁能明白
            雨已经停了，树还在
            左右来回，摇摆
            谁离开了地面
            想飞得更遥远
            说向往大海
            谁翅膀没张开
            却追得很无奈
            只能留下来
            等到四季轮转，候鸟回来
            天空已空了很久，等风来
            季风吹向大海
            到天空之外
            你以为飞鸟
            不知疲惫，只往前飞
            终于有一天
            我们都明白，还要相爱
            回到那棵树上
            脱下骄傲，放低姿态
            季风吹向大海
            到天空之外
            自由和爱情
            哪一个会更难释怀
            没有你的未来
            我像只海豚，迷失在大海
            像那无法预知，无法触摸的
            爱，在天空之外
            谁记得电影的对白
            你手心温暖，依然还在
            夜晚已落幕，梦醒来
            独自星空，徘徊
            谁离开了地面
            想飞得更遥远
            说向往大海
            谁翅膀没张开
            却追得很无奈
            只能留下来
            等到四季轮转，候鸟回来
            天空已空了很久，等风来
            季风吹向大海
            到天空之外
            你以为飞鸟，不知疲惫
            只往前飞
            终于有一天
            我们都明白，还要相爱
            回到那棵树上，脱下骄傲
            放低姿态
            季风吹向大海
            到天空之外
            自由和爱情
            哪一个会更难释怀
            没有你的未来
            我像只海豚，迷失在大海
            像那无法预知，无法触摸的
            爱，在天空之外
            季风吹向大海
            到天空之外
            自由和爱情
            哪一个，会更难释怀
            没有你的未来
            我像只海豚，迷失在大海
            像那无法预知，无法触摸的
            爱，在天空之外
            <br/><br/><br/><br/>
            谁还在听着天气台
            你脸上阴晴，谁能明白
            雨已经停了，
</p>
    </div>
    <script>
        var div=document.querySelector('div');
        setTimeout(fun,1000);
        //通过设置flg变量，配合三元表达式，实现文字向上滚动
        var flg=true;
        function fun(){
            if(div.scrollTop<=0)flg=true;
            //当div.scrollTop的值大于等于700的时候，就重新赋值为0
            if(div.scrollTop>=730){flg=false;div.scrollTop=0}
            //+=3是控制向上移动的距离
            flg?div.scrollTop+=3:div.scrollTop+=3;
            console.log(div.scrollTop);
            //递归，隔330毫秒调用一次
            setTimeout(fun,330);
        }
    </script>
</body>
</html>

萝卜头888

关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
2
评论
js实现文字向上自动循环滚动

实现这个效果，需要注意给装文字的盒子，设置一个高度；还有外部的大盒子设置一个高度，向上滚动是用了scrollTop，通过设置偏移量，实现文字向上滚动。详细代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
复制链接

扫一扫