使用JavaScript怎么实现一个文字无缝上下滚动功能-创新互联

使用JavaScript怎么实现一个文字无缝上下滚动功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

成都创新互联公司成立于2013年,先为固原等服务建站,固原等地企业,进行企业商务咨询服务。为固原企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

具体如下:




 
 
 文字列表无缝滚动代码
 
  *{
   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;
  }
 



 
  
  • 1
  •   
  • 2
  •   
  • 3
  •   
  • 4
  •   
  • 5
  •   
  • 6
  •   
  • 7
  •    
     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)}

    看完上述内容,你们掌握使用JavaScript怎么实现一个文字无缝上下滚动功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


    标题名称:使用JavaScript怎么实现一个文字无缝上下滚动功能-创新互联
    网站URL:http://hbruida.cn/article/cdjidd.html

    其他资讯