简单实现跑马灯案例

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
        }
    }
复制代码