jquery实现文字上下无缝滚动 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .nl {
        height: 30px;
        margin: 0;
        overflow: hidden;
        padding: 0 0 0 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 200px;
    }

    .nl div {
        font-size: 24px;
        height: 30px;
        line-height: 30px;
    }
    </style>
</head>

<body>
    <div id="n1" class="nl">
        <div>是不是不一样的啊</div>
        <div>这里的文字发的</div>
        <div>very ggod</div>
    </div>
    <script type="text/javascript">
    var vMarq = function(id, tag, heigh, speed, delay) {
        var me = this;
        me.EL = document.getElementById(id);
        me.PA = 0;
        me.TI = null;
        me.LH = heigh;
        me.SP = speed;
        me.DY = delay;
        me.exec = function() {
            if (me.PA) return;
            me.EL.scrollTop += 2;
            if (me.EL.scrollTop % me.LH <= 1) {
                clearInterval(me.TI);
                me.EL.appendChild(me.EL.getElementsByTagName(tag)[0]);
                me.EL.scrollTop = 0;
                setTimeout(me.start, me.DY * 1000);
            }
        };
        me.start = function() {
            if (me.EL.scrollHeight - me.EL.offsetHeight >= me.LH) me.TI = setInterval(me.exec, me.SP);
        };
        me.EL.onmouseover = function() { me.PA = 1 };
        me.EL.onmouseout = function() { me.PA = 0 };
        setTimeout(me.start, me.DY * 1000);
    };

    new vMarq("n1", "div", 30, 80, 1.5);
    </script>
</body>

</html>

 

posted @ 2017-10-31 10:40  松歌  阅读(2232)  评论(0)    收藏  举报