Home / Blog / effect

JS文字无缝滚动

Author: Vic.Wang 2016/08/16 Tags:滚动文字滚动文本滚动无缝滚动textrollseamless

网上找的代码,自己整理下,下次可直接用了,不用每次都去找一遍。

效果如下:

风起云涌,雨落无痕。曾记素衣否?白马跃九州。剑指金沙东,而今已四秋。卧听江湖雨,醉饮竹叶靑。倚剑盂溪上,凝雪夜成风。

代码如下:

HTML代码:

        
风起云涌,雨落无痕。曾记素衣否?白马跃九州。剑指金沙东,而今已四秋。卧听江湖雨,醉饮竹叶靑。倚剑盂溪上,凝雪夜成风。

CSS代码:

        #wrap{
            overflow: hidden;
            width: 815px;
        }
        #wrap .wrapIn{
            width: 8000%;
            height: 30px;
        }
        #wrap .wrapIn div{
            float: left;
            margin-right: 50px;
        }
                    

JS代码:

        var wrap = document.getElementById("wrap");
        var text1 = document.getElementById("text1");
        var text2 = document.getElementById("text2");
        text2.innerHTML = document.getElementById("text1").innerHTML;

        setInterval(function() {
            if (wrap.scrollLeft - text2.offsetWidth >= 0) {
                wrap.scrollLeft -= text1.offsetWidth;
            } else {
                wrap.scrollLeft++;
            }
        }, 20);