1. 程式人生 > >JS 跑馬燈效果實現

JS 跑馬燈效果實現

html部分
<div class="box8">
        <div class="t_news">
            <ul class="news_li">
                <li><a href="javascript:;">蘋果8降價</a></li>
                <li><a href="javascript:;">蘋果7降價</a></li>
                <li><a href="javascript:;">蘋果6降價</a></li>
                <li><a href="javascript:;">蘋果5降價</a></li>
                <li><a href="javascript:;">蘋果4降價</a></li>
                <li><a href="javascript:;">蘋果X降價</a></li>
            </ul>
            <ul class="swap"></ul>
        </div>
    </div>

css部分
*{
    margin: 0;
    padding: 0;
    font-size: 12px;
}
a{
    text-decoration: none;
}
ul,li{
    list-style: none;
}
.box8{
    height: 35px;
    background: #000;
    overflow: hidden;
}
.t_news{
    height: 19px;
    color: #fff;
    padding-left: 10px;
    margin: 8px 0;
    overflow: hidden;
    position: relative;
}
.news_li,.swap{
    line-height: 19px;
    font-weight: bold;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 72px;
}
.news_li a,.swap a{
    color: #fff;
}
.swap{
    top: 19px;
}
js部分
function Textrolling(){
    t = parseInt(x.css('top'));
    y.css('top','19px');
    x.animate({
        top:t-19 + 'px'
    },'slow');//19為每個li的高度
    if(Math.abs(t) == h-19){//19為每個li的高度
        y.animate({
            top:'0px'
        },'slow');
        z=x;
        x=y;
        y=z;
    }
    setTimeout(Textrolling,3000);//滾動間隔時間 現在是3秒
}
$(document).ready(function(){
    $('.swap').html($('.news_li').html());
    x = $('.news_li');
    y = $('.swap');
    h = $('.news_li li').length * 19;//19為每個li的高度
    setTimeout(Textrolling,3000);//滾動間隔時間 現在是3秒
})