利用js、css写出滚动字幕

这几天仿写一个首页,发现网上有一个是通过<marque>的html标签进行处理的,但是后面好像这个不太行了,所以就通过js和css来实现,将会用到jquery.js来实现。

先来看成品图

图片[1]-利用js、css写出滚动字幕-云思博客
图片[2]-利用js、css写出滚动字幕-云思博客

就是一个从右往左的一个滚动方式

用到的实例代码:

<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="http://www.yuucc.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>

将三段代码带入就可以实现此效果

© 版权声明
THE END
喜欢就支持一下吧
点赞12赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容