原生js实现水平方向无缝滚动

摘要：水平方向无缝滚动滚动支持图片，文字 原理 ：一个大的盒子中放置两个盒子，通过设置offsetWidth，scrollLeft的关系来实现，而且还用到定时器函数setInterval，当手指移动上去定义滚动，离开继续滚动。兼容各大浏览器。 HTML代码<div id="demo">    <div&nb

水平方向无缝滚动

滚动支持图片，文字 
原理 ：一个大的盒子中放置两个盒子，通过设置offsetWidth，scrollLeft的关系来实现，而且还用到定时器函数setInterval，当手指移动上去定义滚动，离开继续滚动。兼容各大浏览器。 
HTML代码

<div id="demo">
   <div id="demoin">
     <div id="demo1">
       <a href="">测试文字1</a>
       <a href="">测试文字2</a>
       <a href="">测试文字3</a>
       <a href="">测试文字4</a>
       <a href="">测试文字5</a>
       <a href="">测试文字7</a>
       <a href="">测试文字8</a>
       <a href="">测试文字9</a>
       <a href="">测试文字10</a>
       <a href="">测试文字11</a>
       <a href="">测试文字12</a>
       <a href="">测试文字13</a>
       <a href="">测试文字14</a>
       <a href="">测试文字15</a>
       <a href="">测试文字16</a>
       <a href="">测试文字17</a>
     </div>
     <div id="demo2"></div>
   </div>
 </div>

CSS代码

#demo{
      width:1000px;
      height:30px;
      overflow:hidden;
      line-height:30px;
      font-size:13px;
      font-family:'宋体';
      background:#ddd url(images/notice.png) no-repeat 25px center;
      color:#0C77CF;
      font-weight:bold;
      margin: 0 auto;
    }
    #demoin {
      width: 900px;
      height: 30px;
      margin: 0 auto;
      white-space: nowrap;
      overflow: hidden;
    }
    #demo #demo1, #demo #demo2{display:inline}

Javascript代码

window.onload = function(){
   scrollLeft();
 };
 function scrollLeft(){
   var speed = 20;
   var tab = document.getElementById('demoin');
   var tab1 = document.getElementById('demo1');
   var tab2 = document.getElementById('demo2');
   tab2.innerHTML = tab1.innerHTML;
   function Marquee(){
     if(tab2.offsetWidth - tab.scrollLeft <=0) {   
       tab.scrollLeft = 0;
     }else{
       tab.scrollLeft ++;
     }
 
   }
   var timer = setInterval(Marquee,speed);
   tab.onmouseover = function(){
     clearInterval(timer);
   };
   tab.onmouseout = function(){
     timer = setInterval(Marquee,speed);
   }
 }

效果图： 

效果就是一直滚动。

注意：内容的宽度必须大于容器的宽度，否则无法滚动，测试文字一般是使用ajax后台获取。

  更多关于原生js实现水平方向无缝滚动请关注PHP中文网（www.php.cn）其他文章！