用css、js实现字幕横向滚动

    最近，在写电子房价牌页面时，关于电子房价的提示，需要用到横向滚动字幕的效果，本文用的是jquery.js的方法来实现的。在网上查阅资料的时候，发现以前会使用的html标签来处理，但是，最新的MDN已将该标签废弃。

一、实例相关情况介绍

        用js实现字幕的横向水平滚动效果，效果图如下：

二、运用的实例代码

	

	酒店 友情提示：1.周五、周六、节假日房价有一定上调，请以官网价格为准!
	

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

三、总结

        如文章哪里有问题，欢迎大家留言进行指正，谢谢！

参考博客：CSS JS html实现滚动字幕点击打开链接

版权声明：本文为博主原创文章，未经博主允许不得转载。