js 实现上下无缝循环滚动

最新推荐文章于 2024-07-16 17:26:59 发布

今天有坑么

最新推荐文章于 2024-07-16 17:26:59 发布

阅读量4.9k

点赞数 4

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45187559/article/details/125479395

版权

JavaScript HTML 滚动效果前端开发定时器

关键词由CSDN通过智能技术生成

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js 实现上下滚动

html 上下滚动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>���������ѭ�������Ĺ�����Ч��</title>
</head>
<body>
    <table width="60" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width=60 height=152>
            <div class="RPR-P1">
                <div class="RPR-P1-R2">
                    <div id="demo" style="overflow: hidden; width: 100%; height:152px; color:white; margin:0px;line-height:22px;">
                        <div id="demo1">
                            ��<a href="javascript:alert('����')" style="text-decoration:none">����</a><br>
                            ��<a href="javascript:alert('�Ͻ�')" style="text-decoration:none">�Ͻ�</a><br>
                            ��<a href="javascript:alert('��ɳ')" style="text-decoration:none">��ɳ</a><br>
                            ��<a href="javascript:alert('�ǹ�')" style="text-decoration:none">�ǹ�</a><br>
                            ��<a href="javascript:alert('ƽ��')" style="text-decoration:none">ƽ��</a><br>
                            ��<a href="javascript:alert('����')" style="text-decoration:none">����</a><br>
                            ��<a href="javascript:alert('��')" style="text-decoration:none">��</a><br>
                            ��<a href="javascript:alert('ǭ��')" style="text-decoration:none">ǭ��</a><br>
                            ��<a href="javascript:alert('ƽ��')" style="text-decoration:none">ƽ��</a><br>
							��<a href="javascript:alert('��ˮ')" style="text-decoration:none">��ˮ</a><br>
                        </div>
                        <div id="demo2">
                        </div>
                    </div>
                </div>
            </div>
          </td>
        </tr>
    </table>
<script>
     var speed = 50
     var _demo = document.getElementById("demo");
     var _demo1 = document.getElementById("demo1");
     var _demo2 = document.getElementById("demo2");
     demo2.innerHTML=demo1.innerHTML
     function Marquee(){
      if(_demo2.offsetTop-_demo.scrollTop<=0){
       _demo.scrollTop-=_demo1.offsetHeight
      }else{
       _demo.scrollTop++
      }
     }
     var MyMar=setInterval(Marquee,speed)
     _demo.onmouseover=function() {clearInterval(MyMar)}
     _demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>