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

2024-05-06 16:52:36

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现简单的文字无缝上下滚动功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="author" content="" /> <title>文字列表无缝滚动代码</title> <style type="text/css">  *{   margin:0px;   padding:0px;   border:0px;  }  body{font-size:12px}  #demo{   overflow:hidden;   height:80px;   width:280px;   margin:90px auto;   position:relative;  }  #demo1{   height:auto;   text-align:left;  }  #demo2{   height:auto;   text-align:left;  }  #demo1 li{   list-style-type:none;   height:22px;   text-align:left;   text-indent:15px;  }  #demo2 li{   list-style-type:none;   height:22px;   text-align:left;   text-indent:15px;  } </style></head><body><div id="demo"> <ul id="demo1">  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li> </ul> <div id="demo2"></div></div><script type="text/javascript"> var speed=40  // 向上滚动  var demo=document.getElementById("demo");  var demo2=document.getElementById("demo2");  var demo1=document.getElementById("demo1");  demo2.innerHTML=demo1.innerHTML  function Marquee(){   if(demo.scrollTop>=demo1.offsetHeight){    demo.scrollTop=0;   }   else{    demo.scrollTop=demo.scrollTop+1;   }  }  var MyMar=setInterval(Marquee,speed)  demo.onmouseover=function(){clearInterval(MyMar)}  demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} //向下滚动 // demo2.innerHTML=demo1.innerHTML // demo.scrollTop=demo.scrollHeight // function Marquee2(){ //  if(demo1.offsetTop-demo.scrollTop>=0) //   demo.scrollTop+=demo2.offsetHeight //  else{ //   demo.scrollTop-- //  } // } // var MyMar2=setInterval(Marquee2,speed) // demo.onmouseover=function() {clearInterval(MyMar2)} // demo.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}</script></body></html>

希望本文所述对大家JavaScript程序设计有所帮助。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：js图片查看器插件用法示例

下一篇：nodejs实现获取本地文件夹下图片信息功能示例