前端css/js实现文字上下滚动

原创
所属分类: Web前端 2019-08-15 279
来源:baidu.com

CSS部分:

.news {
    height: .4rem;
    line-height: .4rem;
    overflow: hidden;
    position: absolute;
    top: 35%;
    left: 1.6rem;
    color: #666666;
}
.news>ul {
    list-style: none;
}


JS部分:

$(function(){
    var news_obj = $("#news");
    var scrollTimer;
    scrollTimer = setInterval(function() {
        scrollNews(news_obj);
    }, 1500);
 
    function scrollNews(obj) {
        var ul_obj = obj.find("ul:first");
        var lineHeight = obj.find("li:first").height(); 
        ul_obj.animate({
            "marginTop": -lineHeight + "px"
        }, 500, 'linear', function() {
            ul_obj.css({
                marginTop: 0
            }).find("li:first").appendTo(ul_obj);
        })
    }
});


HTML:

<div class="news" id="news">
    <ul>
        <li>文本1</li>
        <li>内容2</li>
    </ul>
</div>


原创声明:本文为博主原创文章,转载请附上原文出处链接和声明。

相关推荐

更多内容>

原生js实现复制文本到粘贴板

Web前端

前端如何展示商品属性:SKU多维属性状态判断算法的应用

Web前端

bootstrap-switch 使用中遇到的问题

Web前端

如何在CSS中添加手机端(移动端)自适应样式

Web前端
点这里分享到
朋友圈