无缝滚动demo

短命女 2023-06-09 13:22 9阅读 0赞

<!DOCTYPE HTML>
    <html lang="en-US">
    <head>
      <meta charset="UTF-8">
      <title>无缝滚动上下平移</title>
      <style type="text/css">
        *{margin:0;padding:0;}
        li{list-style:none;}
        img{border:0;}
        #scroll{width:178px;margin:50px auto;position:relative;}
         .content{margin:10px 0;height:440px;overflow:hidden;position:relative;}
        .content ul{position:absolute;top:0;left:0;}
        .content li{height:110px;}
      </style>
    </head>
    <body>
    <div id="scroll">
      <div class="content">
        <ul>
          <li1111111111111111111</li>
          <li>22222222222222222222222</li>
          <li>3333333333333333333333333333</li>
          <li>44444444444444444</li>
        </ul>
      </div>
     </div>
    </body>
    </html>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('scroll');
            var btnUp = document.getElementById('up');
            var btnDown = document.getElementById('down');
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var timer = null;
            var speed = -1;
            oUl.innerHTML += oUl.innerHTML;
            setTimeout(move,1500);
    
            oUl.onmouseover = function(){
                clearInterval(timer);
            };
            oUl.onmouseout = function(){
                move();
            };
            function move(){
                timer = setInterval(function(){
                    oUl.style.top = oUl.offsetTop + speed + 'px';
                    if(oUl.offsetTop <= - oUl.offsetHeight / 2){
                        oUl.style.top = '0';
                    }else if(oUl.offsetTop >= 0){
                        oUl.style.top = - oUl.offsetHeight / 2 + 'px';
                    };
                },30);
            };
        };
    </script>

方便下次直接copy

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关无缝滚动demo

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8">

短命女/ 2023年06月09日 13:22/ 0 赞/ 10 阅读

相关 Vue Notice消息无缝滚动

[https://www.cnblogs.com/conglvse/p/9988134.html][https_www.cnblogs.com_conglvse_p_99881

灰太狼/ 2023年02月14日 13:25/ 0 赞/ 117 阅读

相关 jQuery kxbdMarquee 无缝滚动

转：http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签，其他浏览器并不兼容，于

深碍√TFBOYSˉ_/ 2022年12月30日 10:58/ 0 赞/ 159 阅读

相关 javascript 书写无缝滚动。

废话少说，献上demo [ 源码][Link 1] 大家自己下载看效果。先放上html代码： <!DOCTYPE html> <html> <h

╰半夏微凉°/ 2022年09月25日 13:17/ 0 赞/ 215 阅读

相关 marquee无缝滚动

marquee无缝滚动利用i5scroll进行二次封装 > 为了满足工作需求进行二次封装 ~(function ($, window, document,

布满荆棘的人生/ 2022年08月30日 11:39/ 0 赞/ 206 阅读

相关 js左右无缝滚动代码

无缝滑动图片的原理是用一个div1来装所有图片，再复制一个同样的div2，将这两个div放在一个indiv里面，外面再包一个div。通过控制最外层div的scollLeft实现

桃扇骨/ 2022年07月16日 06:27/ 0 赞/ 270 阅读

相关 js实现无缝向上滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

矫情吗；*/ 2022年05月13日 08:36/ 0 赞/ 265 阅读

相关 js图片无缝滚动

> 虽然是一个简单的案例，但思想确实很巧妙，且一通百通！主要原理：利用利用动态创建一个与当前相同的图片条，利用scrollLeft（滚动条的左水平偏移来实现滚动用利用视觉

爱被打了一巴掌/ 2022年03月25日 08:57/ 0 赞/ 406 阅读

相关 Vue无缝滚动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

我就是我/ 2021年09月03日 04:01/ 0 赞/ 493 阅读

相关 js实现图片无缝滚动

js实现图片无缝滚动实现原理：图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插...

红太狼/ 2020年06月03日 13:47/ 0 赞/ 779 阅读