javascript 实现新闻自动滚动

最新推荐文章于 2024-07-16 17:26:59 发布

M-Didid

最新推荐文章于 2024-07-16 17:26:59 发布

阅读量772

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41251187/article/details/115173738

版权

javaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

html代码

<body>
    <div class="level1">
        <div class="parent" id="parent">
            <div class="scroll-one" id="scroll-one">
                <ul>
                    <li>第1行</li>
                    <li>第2行</li>
                    <li>第3行</li>
                    <li>第4行</li>
                    <li>第5行</li>
                    <li>第6行</li>
                    <li>第7行</li>
                    <li>第8行</li>
                </ul>
            </div>
            <div class="scroll-two">
                <ul>
                    <li>第1行</li>
                    <li>第2行</li>
                    <li>第3行</li>
                    <li>第4行</li>
                    <li>第5行</li>
                    <li>第6行</li>
                    <li>第7行</li>
                    <li>第8行</li>
                </ul>
            </div>
        </div>
    </div>
</body>

css代码

.level1 {
        width: 1000px;
        height: 500px;
        border: red 1px solid;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .parent {
        width: 50%;
        height: 50%;
        background-color: aqua;
        overflow: hidden;   /*必须*/
    }
    ul li {
        height: 30px;
        list-style: none;
    }

注意：父级元素必须设置为overflow: hidden;
Js代码


<script>
    var init = function () {
        var parent = document.getElementById("parent");
        var scrollone = document.getElementById("scroll-one");
        console.log(parent.scrollTop)
        console.log(scrollone.offsetHeight)
        setInterval(function () {
            if (parent.scrollTop > scrollone.offsetHeight) {
                parent.scrollTop = 0;
            } else {
                parent.scrollTop++;
            }
        }, 100);
    }
    init();
</script>

根据父级元素的scrollTop值和子元素的offsetHeight值来改变父元素的scrollTop,以实现滚动效果。

注意：浏览器的滚轮缩放网页大小会影响到滚动的效果，可以调节 parent.scrollTop++;以达到合适的滚动速度

M-Didid

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript 实现新闻自动滚动

html代码<body> <div class="level1"> <div class="parent" id="parent"> <div class="scroll-one" id="scroll-one"> <ul> <li>第1行</li> <li&
复制链接

扫一扫

专栏目录