原生js實現(xiàn)水平方向無縫滾動

更新時間：2017年01月10日 15:58:32 作者：想要全棧的chris

這篇文章主要為大家詳細介紹了原生js實現(xiàn)水平方向無縫滾動的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

水平方向無縫滾動

滾動支持圖片，文字
原理：一個大的盒子中放置兩個盒子，通過設置offsetWidth，scrollLeft的關系來實現(xiàn)，而且還用到定時器函數(shù)setInterval，當手指移動上去定義滾動，離開繼續(xù)滾動。兼容各大瀏覽器。
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);
    }
  }

效果圖：

效果就是一直滾動。

注意：內(nèi)容的寬度必須大于容器的寬度，否則無法滾動，測試文字一般是使用ajax后臺獲取。

您可能感興趣的文章:

通過BootStrap-select插件 js jQuery控制select屬性變化
bootstrap-select我想大家都不陌生是一個前端下拉框的插件非常好用，在select的標簽中設置屬性可以做很多功能控制，下面通過本文給大家詳細介紹下
2017-01-01
JavaScript?邏輯或?||?的妙用及相關知識普及
本文給大家介紹了JavaScript中的邏輯或運算符||的用法,包括其基本概念、真值和假值、常見應用以及與其他邏輯運算符的對比,感興趣的朋友跟隨小編一起看看吧
2024-12-12
解決微信授權(quán)成功后點擊按返回鍵出現(xiàn)空白頁和報錯的問題
這篇文章主要介紹了解決微信授權(quán)成功后點擊按返回鍵出現(xiàn)空白頁和報錯的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-06-06
JavaScript實現(xiàn)文件下載并重命名代碼實例
這篇文章主要介紹了JavaScript實現(xiàn)文件下載并重命名代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-12-12
js 隨機數(shù)代碼大全
很多情況下，需要用到隨機數(shù)，腳本之家特為大家整理了一些具體的使用與說明。
2010-08-08
window.print打印指定div實例代碼
window.print可以打印網(wǎng)頁，但有時候我們只希望打印特定控件或內(nèi)容，怎么辦呢，請看下面的例子
2013-12-12
javascript 頁面只自動刷新一次
記得meta標簽當中有一個refresh的功能嗎？這是讓瀏覽的頁面刷新并可以轉(zhuǎn)到相應的頁面，如果刷新本頁的話就會造成重復的刷新，現(xiàn)在我們就試試用腳本來實現(xiàn)只讓頁面刷新一次.
2009-07-07
原生js實現(xiàn)日期聯(lián)動
日期聯(lián)動算是一個比較常見的功能了，隨便度娘一下，你就能找到N多代碼，今天給大家介紹的是個人比較常用，代碼很簡潔，高效，這里推擠給大家。
2015-01-01
JS顯示日歷和天氣的方法
這篇文章主要介紹了JS顯示日歷和天氣的方法,涉及JavaScript日期與時間的操作技巧,非常簡單實用,需要的朋友可以參考下
2016-03-03
JS中實現(xiàn)簡單Formatter函數(shù)示例代碼
JS沒有提供方便使用的Formatter函數(shù)，用字符拼接的方式看起來混亂難讀，下面是JS簡單實現(xiàn)版本(沒有嚴格測試)
2014-08-08