问关于一个javascript动效问题？

提问于 2017-11-23 10:13:16

回答 1关注 0查看 322

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

<!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>

相似问题