js 滚动的文字（走马灯）

// 滚动的文字
function marqueeScroll() {
    //var $target = $(".marquee_outer:visible");
    if($(".marquee_outer").length == 0) {
        return false;
    }
    $(".marquee_outer").each(function() {
        var $target = $(this);
        if($target.hasClass("data-setInterval")) {
            return true; // 已经设置过滚动定时器
        }
        if($target.find("i").length == 0) {
            $target.wrapInner("<i></i>");
        }
        if($target.width() > $target.find("i").width()) {
            return true;
        }
        if($target.find(".marquee_inner2").length == 0) {
            $target.wrapInner('<span class="marquee_inner2" style="width:1000%"></span>');
            $target.find(".marquee_inner2").append($target.find("i").clone(true));
        }
        var marquee_1 = $target.find("i")[0];
        var marquee_2 = $target.find("i")[1];
        var marquee_outer = $target[0];
        setInterval(function() {
            if(marquee_outer.scrollLeft - marquee_2.offsetWidth >= 0) {
                marquee_outer.scrollLeft -= marquee_1.offsetWidth;
            } else {
                marquee_outer.scrollLeft++;
            }
        }, 30);
        $target.addClass("data-setInterval");
    });
}

 

// 调用
<script>
setInterval(marqueeScroll, 2000);  // 标题文字滚动
</script>

<div class="marquee"><em>知识点{{ forloop.counter }}:</em><span class="marquee_outer">{{ k.name }}</span></div>

 

.

转载于:https://www.cnblogs.com/weiok/p/5984078.html