jquery動畫 -- 8.走馬燈效果的制作

　　今天要介紹的是走馬燈效果的制作，效果圖如下，頁面中‘Recent Posts’就是走馬燈部分。

　　

　　現在我們介紹如何制作走馬燈，首先定義html頁面結構。

<div id="outer">
　　<header>
　　...  
　　</header>
　　<article>
　　...   
　　</article>
　　<aside>
　　...    
　　</aside>
</div>

　　走馬燈部分的html是通過js實現的，這部分html會添加在上面html header對象下面，生成的html結構如下：

<div id="marquee" style="display: block;">
　　<h2>Recent Posts:</h2>
　　<div style="width: 2715px;">
　　　　<a href="http://www.danwellman.co.uk/ssd-vs-raid0/" title="SSD VS RAID0" style="margin-left: -46.6px;">SSD VS RAID0</a>
　　　　<a href="http://www.danwellman.co.uk/samsung-spf-71es/" title="Samsung SPF-71ES">Samsung SPF-71ES</a>
　　　　...
　　</div>
</div>

　　id=marquee 的div是走馬燈總的容器對象，h2是標題部分，a標簽式一個個需要顯示的內容，他外面又包裹了一個div。接下來定義marquee相關的css。

#marquee
{
    display: none;
    height: 58px;
    margin: -20px 0 20px;
    border: 3px solid #d3d1d1;
    position: relative;
    overflow: hidden;
    background-color: #e5e5e5;
}
#marquee h2
{
    margin: 0;
    position: absolute;
    top: 10px;
    left: 20px;
}
#marquee a
{
    display: block;
    margin-right: 20px;
    float: left;
    font: normal 15px "Nimbus Sans L" , "Helvetica Neue" , "Franklin Gothic Medium" , Sans-serif;
}
#marquee div
{
    margin: 20px 0 0 200px;
    overflow: hidden;
}

　　

　　下面開始介紹最核心的js代碼了。我們會通過ajax方式從遠程連接獲取json數據，json數據格式如下：

{
　　"status": "ok",
　　"count": 1,
　　"count_total": 1,
　　"pages": 1,
　　"posts": [{
　　　　"id": 1,
　　　　"title':"..."
　　　　...
　　},{
　　　　"id": 2,
　　　　"title":"..."
　　　　...
　　}]
}

　　我們首先定義一個ajax方法。

$.getJSON("http://danwellman.co.uk?json=1&count=10&callback=?", function (data) {
　　...
});

　　接下來就需要對data數據進行處理。定義走馬燈容器對象，標題對象，將json數據添加到走馬燈對象中，設置走馬燈寬度等。

//定義走馬燈容器
var marquee = $('<div></div>', {
    id: 'marquee'
}),
//定義走馬燈標題
h2 = $('<h2></h2>', {
    text: 'Recent Posts:'
});

//將ajax的數據添加到走馬燈容器對象
for (var i = 0, len = data.count; i < len; i++) {
    $('<a></a>', {
        href: data.posts[i].url,
        title: data.posts[i].title,
        html: data.posts[i].title
    }).appendTo(marquee);
}

//用div包裹一下a標簽對象，然后添加h2對象；將走馬燈容器添加到header對象后面，漸現
marquee.wrapInner('<div></div>')
    .prepend(h2)
    .insertAfter('header')
    .slideDown('slow');

//設置走馬燈寬度
$('#marquee').find('div').eq(0).width(function () {
    var width = 0;
    //獲取走馬燈里面每個a標簽，累加它們的寬度
    $(this).children().each(function () {
        var el = $(this);
        width += el.width() + parseInt(el.css('marginRight'));
    });
    return width;
});

　　為了實現動畫的效果，我們創建一個自定義事件marquee-ready。這里比較重要的地方是，postLink.animate動畫結束后函數的操作，函數里面通過$(this).appendTo(marquee.find('div').eq(0))，把當前a標簽（也就是第一個a標簽）移動到div容器的最后，這樣可以把第二個a標簽向前移，他就變成了第一個a標簽，再通過marquee.trigger('marquee-ready')方法觸發動畫效果，就實現了不間斷走馬燈效果的實現。大家可以慢慢體會。

//定義自定義事件marquee-ready，產生動畫效果
$('body').delegate('#marquee', 'marquee-ready', function () {
    //獲取走馬燈對象
    var marquee = $(this),
    //獲取走馬燈一個a標簽
    postLink = marquee.find('a').eq(0),
    //計算寬度
    width = postLink.width() + parseInt(postLink.css('marginRight')),
    //計算動畫效果的速度
    time = 15 * width;

    //通過修改a標簽的margin-left屬性，實現動畫效果
    postLink.animate({
        marginLeft: '-=' + width
    }, time, 'linear', function () {
        //第一個a標簽運行完畢，把他的marg-left設置為0，同時將他移動到margin里面的div對象的最后，
        //這樣操作，第二個a標簽對象就變成了第一個a標簽對象。
        //這次再次觸發marquee-ready事件，實現不間斷的循環動畫效果
        $(this).css({
            marginLeft: 0
        }).appendTo(marquee.find('div').eq(0));
        marquee.trigger('marquee-ready');
    });
});

　　一切完畢之后，只需要簡單的觸發marquee-ready事件即可。

//觸發marquee-ready事件
marquee.trigger('marquee-ready');

　　好了，走馬燈的制作講完了，大家可以結合demo自己親手做一做。

　　demo下載地址：jQuery.animation.marquee.zip