成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

原生javascript實現(xiàn)無縫滾動

VPointer / 2137人閱讀

摘要：實現(xiàn)的無縫滾動需要掌握基本的定位和運動知識逐步分析圖片的無縫滾動是怎么實現(xiàn)的的基本結(jié)構(gòu)如下樣式要實現(xiàn)圖片窗口整體的無縫滾動我們需要通過定時器定時改變的位置，于是我們有下面的片段來實現(xiàn)對應(yīng)定時器時間段內(nèi)移動的距離，指開始這樣做能實現(xiàn)基本

實現(xiàn)javascript的無縫滾動需要掌握基本的定位和運動知識
逐步分析圖片的無縫滾動是怎么實現(xiàn)的
HTML的基本結(jié)構(gòu)如下


  
    
    
  • 
    
  • 
    
  • 
    
  •

CSS樣式：

#moving {
  width: 600px;
  height: 370px;
  background-color: #ccc;
  position: relative;
  margin: 30px auto 0;
  overflow: hidden;
}
#moving ul {
  position: absolute;
  left: 0;
  top: 0;
}
#moving ul li {
  list-style: none;
  float: left;
}
#control {
  width:300px;
  margin: 20px auto;
}
#control input {
  margin-left: 30px;
  width: 50px;
}

要實現(xiàn)圖片窗口整體的無縫滾動（我們需要通過定時器定時改變

    的位置，于是我們有下面的片段來實現(xiàn)：

    oUl.style.left = oUl.offsetLeft + speed + "px";

    speed對應(yīng)定時器時間段內(nèi)移動的距離，oUl指ul
    ????開始這樣做能實現(xiàn)基本的運動，但是圖片總是數(shù)量有限的，當(dāng)最后一張圖片滾動展示完畢后，后面就沒有了內(nèi)容。那么我們?nèi)绾慰朔@個困難，讓滾動一直持續(xù)循環(huán)下去呢？
    ????為了達(dá)到這種效果，我們可以克隆同樣的ul結(jié)構(gòu)，并且拼接在一起，比如：

    oUl.innerHTML += oUl.innerHTML;

    注意不要漏了在ul加入overflow:hidden，否則可能會兩欄顯示
    但是這樣做還是不夠的，圖片總會播放完，但是我們不可能復(fù)制成千上萬分一樣的ul結(jié)構(gòu)
    這時候需要一點小技巧
    當(dāng)左段ul（為了闡述方便，分為兩段，左段為原始，右段為復(fù)制的那份）滾動完成，右段的開頭即將離開圖片窗口的時候，將整個ul拉回到原始位置。如果是向右運動，那么當(dāng)左端的開頭第一張圖片到左邊盡頭時，整個ul拉回到起始位置

    function move(){
            if(oUl.offsetLeft < -oUl.offsetWidth/2){  //向左滾動時滾動完左段后馬上將它拉回來
                oUl.style.left = "0";
            }
            if(oUl.offsetLeft > 0){
                oUl.style.left = -oUl.offsetWidth/2 + "px";  //向右滾動時最后一段已經(jīng)到盡頭
            }
            oUl.style.left = oUl.offsetLeft + speed + "px";
        }

    以下是javascript部分

        window.onload = function(){
        var oMove = document.getElementById("moving");
        var oUl = oMove.getElementsByTagName("ul")[0];
        var aLi = oUl.getElementsByTagName("li");
        var oCtr = document.getElementById("control");
        var oLeft = document.getElementById("left");
        var oRight = document.getElementById("right");
        var speed = null;

        oUl.innerHTML += oUl.innerHTML;  //兩段一樣的內(nèi)容
        oUl.style.width = aLi[0].offsetWidth*aLi.length + "px";  //兩段ul寬度不夠，第二段會掉下去

        oLeft.onclick = function(){
            return speed = -3;
        }
        oRight.onclick = function(){
            return speed = 3;
        }

        function move(){
            if(oUl.offsetLeft < -oUl.offsetWidth/2){  //向左滾動時滾動完第一段后馬上將它拉回來
                oUl.style.left = "0";
            }
            if(oUl.offsetLeft > 0){
                oUl.style.left = -oUl.offsetWidth/2 + "px";  //向右滾動時最后一段已經(jīng)到盡頭
            }
            oUl.style.left = oUl.offsetLeft + speed + "px";
        }
        var timer = setInterval(move,30);
        oMove.onmouseover = function(){
            clearInterval(timer);
        };
        oMove.onmouseout = function(){
            timer = setInterval(move,30);
        };

        var btn = document.getElementById("stop");
        btn.onclick = function(){
            clearInterval(timer);   //stop按鍵停止運動，如果在點擊后將鼠標(biāo)先移入圖片再移出會重新開啟
        }
    }

    以上是智能社課程學(xué)習(xí)內(nèi)容

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91932.html

相關(guān)文章

  • vue無縫滾動的插件開發(fā)填坑分享

    摘要：寫插件的初衷項目經(jīng)常需要無縫滾動效果，當(dāng)時寫的時候用用這個老插件，相對不上很好用。后來轉(zhuǎn)向在沒有找到好的無縫滾動插件，除了配置可以實現(xiàn)但是相對來說太重了，于是自己造了個輪子。 寫插件的初衷 1.項目經(jīng)常需要無縫滾動效果，當(dāng)時寫jq的時候用用msClass這個老插件，相對不上很好用。2.后來轉(zhuǎn)向vue在vue-awesome沒有找到好的無縫滾動插件，除了配置swiper可以實現(xiàn)但是相對來...

    岳光 評論0 收藏0

  • js、jQuery實現(xiàn)文字上下無縫輪播、滾動效果

    摘要：因項目需要實現(xiàn)消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節(jié)約一點不必要的時間。 因項目需要實現(xiàn)消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節(jié)約一點不必要的時間。 原生JS版本 文字上下無縫輪播 * { margin: ...

    zhangwang 評論0 收藏0

  • js、jQuery實現(xiàn)文字上下無縫輪播、滾動效果

    摘要：因項目需要實現(xiàn)消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節(jié)約一點不必要的時間。 因項目需要實現(xiàn)消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節(jié)約一點不必要的時間。 原生JS版本 文字上下無縫輪播 * { margin: ...

    PAMPANG 評論0 收藏0

  • js、jQuery實現(xiàn)文字上下無縫輪播、滾動效果

    摘要：因項目需要實現(xiàn)消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節(jié)約一點不必要的時間。 因項目需要實現(xiàn)消息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節(jié)約一點不必要的時間。 原生JS版本 文字上下無縫輪播 * { margin: ...

    focusj 評論0 收藏0

  • javascript定時器實現(xiàn)無縫滾動效果

    摘要：最近學(xué)習(xí)定時器的相關(guān)知識，整理定時器實現(xiàn)無縫滾動的效果。當(dāng)滾動超過總長度的二分之一時即，將切換到向左滾動。 最近學(xué)習(xí)定時器的相關(guān)知識，整理定時器實現(xiàn)無縫滾動的效果。 原理 用定時器實現(xiàn)ul滾動。 當(dāng)滾動超過ul總長度的二分之一時（即oUl.offsetLeft

    RyanHoo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<