关于一个javascript动效问题?

  • 回答 (1)
  • 关注 (0)
  • 查看 (56)

想要实现一个滚动效果,但是代码贴上去无法实现?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .abox {
            overflow: hidden;
            margin: 10px;
            width: 300px;
            height: 240px;
            border: 1px solid red;
        }
         li {
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="abox" id="area1">
        <ul id="tab1" class="u-ct">
            <li><i class="u-lst-tp">·</i><a href="#">杨付龙-132930195503013913</a></li>
            <li><i class="u-lst-tp">·</i><a href="#">刘小宾-132930198212123710</a></li>
            <li><i class="u-lst-tp">·</i><a href="#">刘合营-132930198707153719</a></li>
            <li><i class="u-lst-tp">·</i><a href="#">赵树泉-132930196410152214</a></li>
            <li><i class="u-lst-tp">·</i><a href="#">齐宝祥-132930197407043337</a></li>
            <li><i class="u-lst-tp">·</i><a href="#">王桂兰-130921197611172824</a></li>
            <li><i class="u-lst-tp">·</i><a href="#">邸洪军-132930197511053316</a></li>
            <li><i class="u-lst-tp">·</i><a href="#">韩文娜-132930198202143742</a></li>
        </ul>
    </div>
    <script>
         var speed = 20;
        var area = document.getElementById("area1");
        // var tab1 = document.getElementById("area1").getElementsByTagName("ul")[0]; 这个和var tab1 = document.getElementById("tab1");应该是一样的吧。?????
        var tab1 = document.getElementById("tab1");
        console.log(tab1);
        console.log(area);
        // var tab1 = document.getElementById('demo1');
        // var tab2 = document.getElementById('demo2');
        area.innerHTML += area.innerHTML;
        console.log(tab1.offsetHeight);
        console.log(area.scrollTop);
        function Marquee(){
            if(tab1.offsetHeight - area.scrollTop <=0) {        
                area.scrollTop = 0;
            }else{
                area.scrollTop ++;
            }
        }
        var timer = setInterval(Marquee,speed);
        tab.onmouseover = function(){
            clearInterval(timer);
        };
        tab.onmouseout = function(){
            timer = setInterval(Marquee,speed);
        }
    </script>
</body>
</html>
请叫我sql请叫我sql提问于
帅的惊动我国计算机大神回答于

这两个地方有问题,简单给你改了一下

        var speed = 20;
        var area = document.getElementById("area1");
        var tab1 = document.getElementById("tab1"),
            boxheight = tab1.offsetHeight;
        area.innerHTML += area.innerHTML;
        
        function Marquee(){
            if(boxheight - area.scrollTop <= 0) {       
                area.scrollTop = 0;
            }else{
                area.scrollTop ++;
            }
        }
        var timer = setInterval(Marquee,speed);
        area.onmouseover = function(){
            clearInterval(timer);
        };
        area.onmouseout = function(){
            timer = setInterval(Marquee,speed);
        }

扫码关注云+社区

领取腾讯云代金券