js 无缝滚动 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="content">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </body>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
            list-style:none;
            float:left
        }
        #content {
            width:200px;
            height:500px;
            position:relative;
            overflow:hidden
        }
        #content ul {
            width:100%;
            position:absolute
        }
        #content ul li {
            width:200px;
            height:100px;
        }
        #content ul li:nth-of-type(1) {
            background:yellow
        }
        #content ul li:nth-of-type(2) {
            background:turquoise
        }
        #content ul li:nth-of-type(3) {
            background:navajowhite
        }
        #content ul li:nth-of-type(4) {
            background:blueviolet
        }
        #content ul li:nth-of-type(5) {
            background:red
        }
        #content ul li:nth-of-type(6) {
            background:yellow
        }
        #content ul li:nth-of-type(7) {
            background:turquoise
        }
        #content ul li:nth-of-type(8) {
            background:navajowhite
        }
        #content ul li:nth-of-type(9) {
            background:blueviolet
        }
        #content ul li:nth-of-type(10) {
            background:red
        }
    </style>
    <script type="text/javascript">
         window.onload = function() {
             var content = document.getElementById("content")
             var ul = content.getElementsByTagName("ul")[0]
             var li = ul.getElementsByTagName("li")
             var speed = 1;
        
             ul.innerHTML += ul.innerHTML
            // ul.style.height = li.length * li[0].offsetHeight + "px"
        
             function run() {
                 if (ul.offsetTop < -ul.offsetHeight / 2) {
                     ul.style.top = 0
                 } else if (ul.offsetTop > 0) {
                     ul.style.top = -ul.offsetHeight / 2 + "px"
                 }
        
                 ul.style.top = ul.offsetTop + speed + "px";
                 timer =  requestAnimationFrame(run);
             }
             timer =  requestAnimationFrame(run);
        
             content.onmouseover = function() {
                 cancelAnimationFrame(timer);
             }
        
             content.onmouseout = function() {
                 timer =  requestAnimationFrame(run);
             }
        
        
         }
    </script>
</html>

 

posted @ 2021-06-21 18:11  楛尔  阅读(81)  评论(0)    收藏  举报