html+jquery实现字幕滚动公告

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34041961/article/details/77243323

css样式:

#affiche {

    color: red;
    display: block;
    width: 96%;
    height: 30px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.affiche_text {
    position: absolute;
    top: 0;
    left: 100%;
    line-height: 30px;
    display: block;
    word-break: keep-all;
    text-overflow: ellipsis;
    white-space: nowrap;

}

html标签:

<div id="affiche>
        <span class="affiche_text">字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~</span>
</div> 

js:

//公告滚动 
    var timer = setTimeout(marquee, 1000);
    function marquee() {
        var scrollWidth = $('#affiche').width();
        var textWidth = $('.affiche_text').width();
        var i = scrollW;
        setInterval(function() {
            i--;
            if(i < -textWidth ) {
                i = scrollWidth;
            }
            $('.affiche_text').animate({'left': i+'px'}, 20);
            //console.log(i);
        }, 20);
        //console.log(scrollWidth );
    }

展开阅读全文

没有更多推荐了,返回首页