电脑资源网

 找回密码
 立即注册
查看: 80|回复: 0

JS实现简单的文字无缝上下滚动功能示例

[复制链接]

3

主题

3

帖子

17

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
17
发表于 2019-8-18 22:59:58 | 显示全部楼层 |阅读模式


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="author" content="" />
  6. <title>文字列表无缝滚动代码</title>
  7. <style type="text/css">
  8.   *{
  9.    margin:0px;
  10.    padding:0px;
  11.    border:0px;
  12.   }
  13.   body{font-size:12px}
  14.   #demo{
  15.    overflow:hidden;
  16.    height:80px;
  17.    width:280px;
  18.    margin:90px auto;
  19.    position:relative;
  20.   }
  21.   #demo1{
  22.    height:auto;
  23.    text-align:left;
  24.   }
  25.   #demo2{
  26.    height:auto;
  27.    text-align:left;
  28.   }
  29.   #demo1 li{
  30.    list-style-type:none;
  31.    height:22px;
  32.    text-align:left;
  33.    text-indent:15px;
  34.   }
  35.   #demo2 li{
  36.    list-style-type:none;
  37.    height:22px;
  38.    text-align:left;
  39.    text-indent:15px;
  40.   }
  41. </style>
  42. </head>
  43. <body>
  44. <div id="demo">
  45. <ul id="demo1">
  46.   <li>1</li>
  47.   <li>2</li>
  48.   <li>3</li>
  49.   <li>4</li>
  50.   <li>5</li>
  51.   <li>6</li>
  52.   <li>7</li>
  53. </ul>
  54. <div id="demo2"></div>
  55. </div>
  56. <script type="text/javascript">
  57. var speed=40
  58.   // 向上滚动
  59.   var demo=document.getElementById("demo");
  60.   var demo2=document.getElementById("demo2");
  61.   var demo1=document.getElementById("demo1");
  62.   demo2.innerHTML=demo1.innerHTML
  63.   function Marquee(){
  64.    if(demo.scrollTop>=demo1.offsetHeight){
  65.     demo.scrollTop=0;
  66.    }
  67.    else{
  68.     demo.scrollTop=demo.scrollTop+1;
  69.    }
  70.   }
  71.   var MyMar=setInterval(Marquee,speed)
  72.   demo.onmouseover=function(){clearInterval(MyMar)}
  73.   demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
  74. //向下滚动
  75. // demo2.innerHTML=demo1.innerHTML
  76. // demo.scrollTop=demo.scrollHeight
  77. // function Marquee2(){
  78. //  if(demo1.offsetTop-demo.scrollTop>=0)
  79. //   demo.scrollTop+=demo2.offsetHeight
  80. //  else{
  81. //   demo.scrollTop--
  82. //  }
  83. // }
  84. // var MyMar2=setInterval(Marquee2,speed)
  85. // demo.onmouseover=function() {clearInterval(MyMar2)}
  86. // demo.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
  87. </script>
  88. </body>
  89. </html>


  90. 感兴趣的朋友可以试试
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|电脑资源网-软件系统下载,资源分享 ( 粤ICP备17111396号-1

GMT+8, 2019-10-15 16:52 , Processed in 0.140736 second(s), 22 queries .

styles by 未来集市 >

© 2019-2022 电脑资源网

快速回复 返回顶部 返回列表