js循環滾動

//這是dom結構dom

<div id="demo"><div id="demo1">這裏是你要添加的數據(有浮動記得清楚浮動,否則沒高度)</div><div id="demo2"></div></div>seo

//代碼網上能夠搜到,原理是建立一個demo2 的div就,把demo1 的內容複製到demo2的裏面。定時器來增長demo的滾動高度。當滾動到最底下時讓demo的滾動高度從新賦值。判斷demo2距離父級頂部的高度與demo的滾動高度差值(不循環滾動從新計算);ip

<script>io

// 判斷當前數據是否超過顯示區域,超過則滾動,不然不滾動
    var flag = true;
    if(demo1.offsetHeight <= demo.offsetHeight) {
        flag = false;
    } else {
        flag = true;
    }
    if(flag) {
        var speed = 10   //滾動速度,越小越快
        var cliH = demo1.offsetHeight
        demo2.innerHTML = demo1.innerHTML
        var num = demo2.offsetTop - cliH;   //  這個本來是想實現上面的判斷,可是有bug。只有一條數據時會顯示兩條。做用是用來計算demo2的距離頂部的高度與demo的滾動高度的差,用於下面的判斷。
        function Marquee() {
            if(demo2.offsetTop - demo.scrollTop <= num)
                demo.scrollTop -= demo1.offsetHeight
            else {
                demo.scrollTop++
            }
        }
        var MyMar = setInterval(Marquee, speed)
        demo.onmouseover = function() {
            clearInterval(MyMar)
        }
        demo.onmouseout = function() {
            MyMar = setInterval(Marquee, speed)
        }
    }
</script>function

相關文章
相關標籤/搜索