原生js实现滚动新闻一直滚小练习（利用定时器、scrollTop）

最新推荐文章于 2024-06-24 15:18:02 发布

百事可口

最新推荐文章于 2024-06-24 15:18:02 发布

阅读量590

点赞数

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

本文链接：https://blog.csdn.net/qq_38594056/article/details/106314946

版权

js 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

功能：新闻一直滚动，鼠标进入停止，移开继续。
主要利用定时器setInterval和滚动事件的属性：
scrollTop(用来表示或设置滚动的内容，被卷上去内容的高度，结果为数值)
效果如下：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #box {
            width: 500px;
            height: 300px;
            line-height: 2em;
            background-color: skyblue;
            border: solid 1px;
            margin: 100px auto;
            padding: 0 10px;
            overflow: hidden;
        }
        li {
            list-style: none;
        }
        span {
            margin-right: 10px;
        }
        a {
            text-decoration: none;
            color: black;
        }
        a:hover {
            color: orangered;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div id="box">
    <ul id="list">
        <li><span>1.</span><a href="#">央视:丧钟为"港独"势力而鸣 写给彭定康之流</a>
        <li>
        <li><span>2.</span><a href="#">代表建议未成年人刑责年龄起点降至13岁</a>
        <li>
        <li><span>3.</span><a href="#">为娶认识才两个月的保姆 96岁大爷要卖500万的房</a>
        <li>
        <li><span>4.</span><a href="#">纽约州至少4500名新冠肺炎康复者被送至疗养院</a>
        <li>
        <li><span>5.</span><a href="#">女生上课偷吃被老师发现 抬头先是懵住随后反应可爱</a>
        <li>
        <li><span>6.</span><a href="#">长征五号瞄准7月发射火星探测器 工程按计划推进</a>
        <li>
        <li><span>7.</span><a href="#">拨12315举报 黑龙江开展摩托车及电动车头盔价格检查</a>
        <li>
        <li><span>8.</span><a href="#">疫情之后，我国如何补短板？国家发改委回应</a>
        <li>
        <li><span>9.</span><a href="#">屠海鸣：建议督促香港推动国民教育落细落地</a>
        <li>
        <li><span>10.</span><a href="#">周扬青否认删除拒复合言论</a>
        <li>
        <li><span>11.</span><a href="#">郑恺苗苗换情侣童年照头</a>
        <li>
    </ul>
</div>
<script>
    var box = document.getElementById('box')
    var list = document.getElementById('list')
    //复制一遍文档
    var content = list.innerHTML;
    list.innerHTML += content;

    var time = 10;
    var timer = setInterval(up, time);

    function up() {
        //滚上去的内容大于ul内容高度的一半，重置高度 0
        if (box.scrollTop > (list.offsetHeight >> 1)) {
            box.scrollTop = 0
        } else {
            box.scrollTop++;
        }
    }
    //鼠标移入暂停--清除定时器
    box.onmouseover = function () {
        clearInterval(timer)

    }
    ///鼠标移出继续--启动定时器
    box.onmouseout = function () {
        timer = setInterval(up, time);
    }


</script>
</body>
</html>

百事可口

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js实现滚动新闻一直滚小练习（利用定时器、scrollTop）

功能：新闻一直滚动，鼠标进入停止，移开继续。主要利用定时器setInterval和滚动事件的属性：scrollTop(用来表示或设置滚动的内容，被卷上去内容的高度，结果为数值)效果如下：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>
复制链接

扫一扫