为什么要两个ul,其中的scrollUp函数能给讲解一下吗？

<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="关键字1,关键字2" />
        <meta name="Description" content="描述信息" />
        <title>循环滚动</title>
        
        <style type="text/css">
            *{margin:0;padding:0;}
            ul,li{list-style:none;display:block;}
            #scrollBox{height:150px;width:300px;margin:100px auto;background:#f09;overflow:hidden;}
            #scrollBox #con1,#con2{width:280px;float:left;}
            #scrollBox li{height:15px;line-height:15px;text-align:center;}

</style>

</head>
<body>
        
    <div id="scrollBox">
        <ul id="con1">
            <li>李华中了10块钱<li>
            <li>Leo 中了一个手机<li>
            <li>刘明中了一块毛巾<li>
            <li>ll 中了保温杯<li>
            <li>nice 中了100块钱红包<li>
            <li>108 中了20元优惠券<li>
            <li>ok 中了100块钱<li>
           </ul>
        <ul id="con2"></ul>
    </div>
    <script type="text/javascript">
                var area =document.getElementById('scrollBox');
                var con1 = document.getElementById('con1');
                var con2 = document.getElementById('con2');
                con2.innerHTML=con1.innerHTML;
                function scrollUp(){
                if(area.scrollTop>=con1.offsetHeight){
                    area.scrollTop=0;
                }else{
                    area.scrollTop++
                }
                }
                var time = 50;
                var mytimer=setInterval(scrollUp,time);
                area.onmouseover=function(){
                    clearInterval(mytimer);
                }
                area.onmouseout=function(){
                    mytimer=setInterval(scrollUp,time);
                }
        </script>
</body>

</html>

成长前端初学者

浏览 1374回答 2

2回答

兼容并包

这个是滚动函数啊，意思是说这个li里面内容向上无缝滚动， 2个ul 就是为了第一个ul滚动完后第二个ul接着滚动（这里第二个ul就是复制第一个ul），大白话讲就是第二个ul复制第一个ul的作用

成长前端初学者

那为什么要if(area.scrollTop>=con1.offsetHeight){ area.scrollTop=0;

随时随地看视频慕课网APP