js实现上下滚动跑马灯

css

.core {
        height: 18px;
        overflow: hidden;
    }

html

 

            

                js实现上下滚动跑马灯
                js实现上下滚动跑马灯
            
        

js逻辑

function scrollView(id, interval, direction) {
        var box = document.getElementById(id);
        var can = true;
        var fq = fq || 10;
        interval = interval || 1500;
        direction = direction === -1 ? -1 : 1;
        box.innerHTML += box.innerHTML;
        box.onmouseover = function () {
            can = false;
        };
        box.onmouseout = function () {
            can = true;
        };
        var max = parseInt(box.scrollHeight / 2);
        (function () {
            var stop = box.scrollTop % 18 === 0 && !can;
            if (!stop) {
                var set = direction > 0 ? [max, 0] : [0, max];
                box.scrollTop === set[0] ? (box.scrollTop = set[1]) : (box.scrollTop += direction);
            }
            setTimeout(arguments.callee, box.scrollTop % 18 ? fq : interval);
        }());
    }

    scrollView("div4", 1000);