今天要介绍的是走马灯效果的制作，效果图如下，页面中‘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