原生js實現水平方向無縫滾動

2019-11-19 18:01:36

字體：大中小

來源：轉載

供稿：網友

水平方向無縫滾動

滾動支持圖片，文字
原理：一個大的盒子中放置兩個盒子，通過設置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);    }  }

效果圖：