今天要介紹的是走馬燈效果的製作，效果圖如下，頁面中『recent posts』就是走馬燈部分。
現在我們介紹如何製作走馬燈，首先定義html頁面結構。
<走馬燈部分的html是通過js實現的，這部分html會新增在上面html header物件下面，生成的html結構如下：div
id="outer"
>
<
header
>
...
header
>
<
article
>
...
article
>
<
aside
>
...
aside
>
div>
<id=marquee 的div是走馬燈總的容器物件，h2是標題部分，a標籤式乙個個需要顯示的內容，他外面又包裹了乙個div。接下來定義marquee相關的css。div
id="marquee"
style
="display: block;"
>
<
h2>recent posts:
h2>
<
div
style
="width: 2715px;"
>
<
a href
=""title
="ssd vs raid0"
style
="margin-left: -46.6px;"
>ssd vs raid0
a>
<
a href
=""title
="samsung spf-71es"
>samsung spf-71es
a>
...div
>
div>
#marquee下面開始介紹最核心的js**了。我們會通過ajax方式從遠端連線獲取json資料，json資料格式如下：#marquee h2
#marquee a
#marquee div
,]我們首先定義乙個ajax方法。}
$.getjson("", function (data) );接下來就需要對data資料進行處理。定義走馬燈容器物件，標題物件，將json資料新增到走馬燈物件中，設定走馬燈寬度等。
//定義走馬燈容器
var marquee = $('
', ),
//定義走馬燈標題
h2 = $('', );
//將ajax的資料新增到走馬燈容器物件
for (var i = 0, len = data.count; i < len; i++)
//用div包裹一下a標籤物件，然後新增h2物件；將走馬燈容器新增到header物件後面，漸現
marquee.wrapinner('
') .prepend(h2)
.insertafter('header')
.slidedown('slow');
//設定走馬燈寬度
$('#marquee').find('div').eq(0).width(function
() );
return
width;
});
//一切完畢之後，只需要簡單的觸發marquee-ready事件即可。定義自定義事件marquee-ready，產生動畫效果
$('body').delegate('#marquee', 'marquee-ready', function
() , time, 'linear', function
() );
});
//好了，走馬燈的製作講完了，大家可以結合demo自己親手做一做。觸發marquee-ready事件
marquee.trigger('marquee-ready');
文字走馬燈效果
文字走馬燈效果 最近碰到的問題，由於label的size固定，而label.caption太長，無法完整顯示出來，要求實現文字走馬燈效果，依次顯示出完整的內容。文字走馬燈效果有幾種方法 1 通過移動label.left值實現，但label會移動。不符合要求 2 不斷複製lable.caption來實...
css3 走馬燈效果
純css3實現了乙個正六邊形的走馬燈效果，記錄一下css3動畫的學習情況，效果如下 主要用到的css3技術有 keyframes perspective perspective origin transform translate rotate animation transform origin，...
縱向的走馬燈，有停頓效果
備忘錄 實現了列表資料一條一條向上移動，每移動一條資料停一下 一開始想用屬性的，但是發現，這樣一來初始化的時候會空出乙個可見div的高度，第一條資料才姍姍來遲，而且沒有實現每移動一條資料停頓一下的效果。現在使用anim來控制，scroll 方法第一步開啟animate開關，並且每隔一秒將陣列的第乙個...