js实现marquee头尾无缝滚动

最新推荐文章于 2021-07-20 09:35:32 发布

左钦杨

最新推荐文章于 2021-07-20 09:35:32 发布

阅读量6.5k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/sinat_29843547/article/details/49583423

版权

web前端专栏收录该内容

100 篇文章 1 订阅

订阅专栏

dom:

<div class="marquee" id="marquee">
            <p><span id="marquee-content">
            18301552530用户已获得25%的加奖资格　1830155253１用户已获得25%的加奖资格　1830155253２用户已获得25%的加奖资格</span>

                <span id="marquee-content-footer"></span></p>
        </div>

js:

$(function () {
            var m = $('#marquee')[0];
            var m1 = $('#marquee-content')[0];
            var m2 = $('#marquee-content-footer')[0];
            m2.textContent = m1.textContent;

            function marquee() {
                if (m2.offsetWidth <= m.scrollLeft) {
                    m.scrollLeft -= m2.offsetWidth;
                } else {
                    m.scrollLeft++;
                }
            }

            timer = setInterval(marquee, 30);
            //m.onmouseover = clearInterval(timer, 30);
            /*m.onmouseout = function () {
                timer = setInterval(marquee,30);
            }*/
        })