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>

 

.