JS实现文字无缝滚动

最新推荐文章于 2024-08-09 14:39:44 发布

LullabyLY

最新推荐文章于 2024-08-09 14:39:44 发布

阅读量8.3k

点赞数 2

本文链接：https://blog.csdn.net/qq_42853241/article/details/89525164

版权

今天学习了JS的一些位置属性，练习的时候写一个文字无缝滚动。（之前看书学习的时候也做过一个类似的案例：竖直滚动的文本行）
位置属性：

style.top：设置或返回定位元素的顶部位置
style.left：设置或返回定位元素的左边位置
offsetWidth：自己的的宽度，无单位。
style.width只能得到行内样式设置的宽度
offsetHeight：自己的的高度
offsetTop：距离上一个盒子的顶部的距离
offsetLeft：距离上一个盒子的左边距离
scrollTop：滚动条顶部滚动的像素
scrollLeft：滚动条左边滚动的像素

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #test{
            width:200px;
            height: 200px;
            border: 1px solid black;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="test">
        <div id="test1">
            aaaaaaaaaaaaaaaaaaa<br>
            aaaaaaaaaaaaaaaaaaa<br>
            aaaaaaaaaaaaaaaaaaa<br>
            aaaaaaaaaaaaaaaaaaa<br>
            aaaaaaaaaaaaaaaaaaa<br>
            aaaaaaaaaaaaaaaaaaa<br>
            aaaaaaaaaaaaaaaaaaa<br>
            aaaaaaaaaaaaaaaaaaa<br>
            aaaaaaaaaaaaaaaaaaa<br>
            bbbbbbbbbbbbbbbbbbb<br>
            bbbbbbbbbbbbbbbbbbb<br>
            bbbbbbbbbbbbbbbbbbb<br>
            bbbbbbbbbbbbbbbbbbb<br>
            bbbbbbbbbbbbbbbbbbb<br>
            bbbbbbbbbbbbbbbbbbb<br>
        </div>
        <div id="test2">
        </div>
    </div>
</body>
<script>
    var test=document.getElementById("test");
    var test1=document.getElementById("test1");
    var test2=document.getElementById("test2");
    test2.innerHTML=test1.innerHTML;
    function move() {
        if(test.scrollTop>=test1.offsetHeight){
        test.scrollTop=0;
    }
    else{
        test.scrollTop=test.scrollTop+1;
    }
    }
    setInterval("move()",30);
</script>
</html>