js实现上下滚动跑马灯

最新推荐文章于 2024-09-23 15:32:05 发布

__仰望

最新推荐文章于 2024-09-23 15:32:05 发布

阅读量2.9k

点赞数

分类专栏：前端

前端专栏收录该内容

71 篇文章 2 订阅

订阅专栏

css

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

html

 <div class="shell">
            <div id="div4" class="core">
                <a href="javascript:">js实现上下滚动跑马灯</a>
                <a href="javascript:">js实现上下滚动跑马灯</a>
            </div>
        </div>

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);