问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

信息无缝滚动，无法滚动。

头像
万事如意
    47145176
    <!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>
    javascriptcsshtml
    阅读 1.7k
    2 个回答
    得票最新
    头像
    Captain
      2.9k42133
      ✓ 已被采纳

      clipboard.png

      clipboard.png

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

              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);
        }
      头像
      Reachel
        2.6k1114

        改了下Marquee方法

        <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    /*引入jquery*/
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <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 = 1000;
        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;
        /*定义一次滚动高度*/
        var scrollH = $('.u-ct li').height();
        console.log(tab1.offsetHeight);
        console.log(area.scrollTop);
        function Marquee(){
            // if(tab1.offsetHeight - area.scrollTop <=0) {        
            //     area.scrollTop = 0;
            // }else{
            //     area.scrollTop ++;
            // }
            $(".abox").find("ul").animate({
                marginTop : "-"+scrollH+"px"
            },500,function(){
                $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
            })
        }
        var timer = setInterval(Marquee,speed);
        tab1.onmouseover = function(){
            clearInterval(timer);
        };
        tab1.onmouseout = function(){
            timer = setInterval(Marquee,speed);
        }
    </script>
</body>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题