div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

  div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox

  用marquee实现首尾相连循环滚动效果(仅IE):

  

复制代码 代码如下:

  <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100" onmouseover="this.stop();" onmouseout="this.start();">

  这里是要滚动的内容

  </marquee>

  用div+css+javascript实现首尾相连循环滚动效果(兼容firefox):

  

复制代码 代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <title>div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox</title>

  <style type="text/css">

  #scrollobj {

  white-space: nowrap;

  overflow: hidden;

  width: 500px;

  }

  </style>

  </head>

  <body>

  <div id="scrollobj" onmouseover="javascript:_stop();" onmouseout="javascript:_start();">

  这里是要滚动的内容

  </div>

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

  <!--

  function scroll(obj) {

  /*往左*/

  var tmp = (obj.scrollLeft)++;

  //当滚动条到达右边顶端时

  if (obj.scrollLeft == tmp) {

  obj.innerHTML += obj.innerHTML;

  }

  //当滚动条滚动了初始内容的宽度时滚动条回到最左端

  if (obj.scrollLeft >= obj.firstChild.offsetWidth) {

  obj.scrollLeft = 0;

  }

  /*往上*/

  //var tmp = (obj.scrollTop)++;

  //if (obj.scrollTop == tmp) {

  // obj.innerHTML += obj.innerHTML;

  //}

  //if (obj.scrollTop >= obj.firstChild.offsetWidth) {

  // obj.scrollTop = 0;

  //}

  }

  var _timer = setInterval("scroll(document.getElementById('scrollobj'))", 20);

  function _stop() {

  if (_timer != null) {

  clearInterval(_timer);

  }

  }

  function _start() {

  _timer = setInterval("_scroll(document.getElementById('scrollobj'))", 20);

  }

  //-->

  </script>

  </body>

  </html>