最近，在寫電子房價牌頁面時，關於電子房價的提示，需要用到橫向滾動字幕的效果，本文用的是jquery.js的方法來實現的。在網上查閱資料的時候，發現以前會使用<marque>的html標籤來處理，但是，最新的MDN已將該標籤廢棄。

一、例項相關情況介紹

        用js實現字幕的橫向水平滾動效果，效果圖如下：

二、運用的例項程式碼

<div id="affiche">
	<div class="affiche_text">
	酒店 友情提示：1.週五、週六、節假日房價有一定上調，請以官網價格為準!
	</div>
</div>

#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;
}
 

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js" ></script>
<script type="text/javascript">
(function(){var timer = setTimeout(this.marquee, 1000);}());
    function marquee() {
        var scrollWidth = $('#affiche').width();
        var textWidth = $('.affiche_text').width();
        var i = scrollWidth;
        setInterval(function() {
            i--;
            if(i < -textWidth ) {
                i = scrollWidth;
            }
            $('.affiche_text').animate({'left': i+'px'}, 20);
        }, 20);
    }
</script>
 

三、總結

        如文章哪裡有問題，歡迎大家留言進行指正，謝謝！

參考部落格：CSS JS html實現滾動字幕點選開啟連結