兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码

  html里的marqueen也能实现内容的滚动,但滚动是间断的,在滚动一个周期中,会有一段空白出现。如果滚动的区域比较大,空间的出现,会让页面看起来很不美观。运用JavaScript可以使这一问题得到改观,实现无间断的滚动。

  上下循环滚动代码

  

复制代码 代码如下:

  <div id="demo" onmouseover="clearInterval(inter)" onmouseout="inter=setInterval(qswhMarquee,30)" style="overflow:hidden; height:60px">

  <div id="demo1">

  111111111111111<br>

  222222222222222<br>

  333333333333333<br>

  444444444444444<br>

  555555555555555

  </div>

  <div id="demo2"></div>

  </div>

  <script>

  var t=getid("demo"),t1=getid("demo1"),t2=getid("demo2"),sh=getid("show");

  var inter;

  t2.innerHTML=t1.innerHTML;

  function qswhMarquee(){

  if(t2.offsetTop<=t.scrollTop)

  t.scrollTop-=t1.offsetHeight;

  else

  t.scrollTop++;

  }

  inter=setInterval(qswhMarquee,30);

  function getid(id){

  return document.getElementById(id);

  }

  </script>

  文字左右循环滚动代码

  

复制代码 代码如下:

  <style type="text/css" media="all">

  .d1{

  margin:10px auto;

  width:200px;

  background-color:#CCCCCC;

  height:20px;

  overflow:hidden;

  white-space:nowrap;

  }

  .d2{

  margin:0px auto;

  background-color:#FF9933;

  }

  .div2{

  width:auto;

  height:20px;

  font-size:12px;

  }

  </style>

  <script language="javascript" type="text/javascript">

  var s,s2,s3,s4,timer,i=0;

  function init(){

  s=getid("div1");

  s2=getid("div2");

  s3=getid("div3");

  s4=getid("div4");

  s4.innerHTML=s3.innerHTML;

  s2.style.width=s.offsetWidth+"px";

  s2.style.height=s.offsetHeight+"px";

  timer=setInterval(mar,30)

  }

  function mar(){

  //s2.innerHTML=s.scrollLeft;

  if(s3.offsetWidth<=s.scrollLeft){

  s.scrollLeft-=s3.offsetWidth;

  }else{s.scrollLeft++;}

  }

  function getid(id){

  return document.getElementById(id);

  }

  window.onload=init;

  </script>

  <div class="d1" id="div1">

  <span class="div2" id="div3"> 余志国网站设计工作室提供专业的外贸网站建站服务。</span>

  <span id="div4" class="div2"></span>

  </div>

  <div class="d2" id="div2"></div>