JS实现文字无缝滚动

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

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

代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

只是简单的完成滚动,可自行增加鼠标事件。

你可能感兴趣的:(JS实现文字无缝滚动)