【JavaScript】 跑马灯 间歇无缝上下滚动

先看效果吧:

这里写图片描述

然后是代码:
HTML:

<div class="new">
    <ul>
        <li>第一条新闻</li>  
        <li>第二条新闻第二条了</li> 
        <li>第三条新闻第三条了第三条了</li>  
        <li>第四条新闻第四条了第四条了第四条了</li>  
    </ul> 
</div>

CSS:

ul{
    list-style: none;
    margin-top: 0;
}
ul li {
    height: 30px;
    line-height: 30px;
}
.new{ 
    width:100%;
    height:30px; 
    overflow: hidden; 
    border:1px solid #000;
}

JS:

function autoScroll(obj){  
    $(obj).find("ul").animate({  
        marginTop : "0"  
    }, 400, function() {  
        $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
    })  
}  

$(function(){  
    setInterval('autoScroll(".new")', 1500);
});

猜你喜欢

转载自blog.csdn.net/it429/article/details/73302871
今日推荐