您现在的位置：首页 >> 前端 >> 内容

js跑马灯间歇无缝上下滚动

时间：2017/6/16 9:20:24 点击：

　　核心提示：js跑马灯间歇无缝上下滚动先看效果吧：然后是代码：HTML：vcD4NCjxwcmUgY2xhc3M9'brush:sql;'>第一条新闻第二条新闻第二条了第三条新闻第三条了第三条了第四条新闻第四条了...

js跑马灯间歇无缝上下滚动

先看效果吧：

js跑马灯间歇无缝上下滚动

然后是代码：
HTML：<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:sql;">

第一条新闻
第二条新闻第二条了
第三条新闻第三条了第三条了
第四条新闻第四条了第四条了第四条了

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