簡單實現跑馬燈案例

var box = document.getElementById('box'),
        ul = document.getElementsByTagName('ul')[0];
    ul.innerHTML += ul.innerHTML;//同樣的程式碼在複製一份放在後面
    ul.style.width = '1200px';
    setInterval(() => {
        if (box.scrollLeft >= 600) {
            box.scrollLeft = 0;//讓元素之間閃到最右邊
        }
        box.scrollLeft += 1;
    }, 10)
    //獲取css的樣式:getComputedStyle(ele) ：獲取當前元素的所有樣式
    //getComputedStyle(ele).width 獲取當前元素的樣式的寬度'600px'只想拿600就parseFloat();
    //currentStyle低版本的ie用這個
    //requestanimationframe 網上查一下用法

    function getCss(ele, attr) {//獲取ele的attr屬性
        var str = getComputedStyle(ele)[attr];
        if (/width|height|top|margin|padding|left/.test(attr)) {
            return psrseFloat(str);
        }
        return str;
    }

    function setCss(ele, attr, val) {
        if (/width|height|top|margin|padding|left/.test(attr)) {
            ele.style[attr] = parseFloat(val) + 'px';
        } else {
            ele.style[attr] = val;
        }
    }

    function winH() {
        //獲取當前螢幕的高度
        var h = document.body.clientHeight || document.documentElement.clientHeight;
        //獲取當前螢幕的寬度
        var w = document.body.clientWidth || document.documentElement.clientWidth;
        return {
            w,
            h
        }
    }
複製程式碼