快捷導(dǎo)航

原生js實(shí)現(xiàn)水平方向無(wú)縫滾動(dòng)

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

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

水平方向無(wú)縫滾動(dòng)

滾動(dòng)支持圖片，文字
原理：一個(gè)大的盒子中放置兩個(gè)盒子，通過(guò)設(shè)置offsetWidth，scrollLeft的關(guān)系來(lái)實(shí)現(xiàn)，而且還用到定時(shí)器函數(shù)setInterval，當(dāng)手指移動(dòng)上去定義滾動(dòng)，離開(kāi)繼續(xù)滾動(dòng)。兼容各大瀏覽器。
HTML代碼

 <div id="demo">
    <div id="demoin">
      <div id="demo1">
        <a href="">測(cè)試文字1</a>
        <a href="">測(cè)試文字2</a>
        <a href="">測(cè)試文字3</a>
        <a href="">測(cè)試文字4</a>
        <a href="">測(cè)試文字5</a>
        <a href="">測(cè)試文字7</a>
        <a href="">測(cè)試文字8</a>
        <a href="">測(cè)試文字9</a>
        <a href="">測(cè)試文字10</a>
        <a href="">測(cè)試文字11</a>
        <a href="">測(cè)試文字12</a>
        <a href="">測(cè)試文字13</a>
        <a href="">測(cè)試文字14</a>
        <a href="">測(cè)試文字15</a>
        <a href="">測(cè)試文字16</a>
        <a href="">測(cè)試文字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);
    }
  }

效果圖：

效果就是一直滾動(dòng)。

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

您可能感興趣的文章:

相關(guān)文章

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