jquery动画 -- 8.走马灯效果的制作

　　今天要介绍的是走马灯效果的制作，效果图如下，页面中‘Recent Posts’就是走马灯部分。

　　

　　现在我们介绍如何制作走马灯，首先定义html页面结构。

　　走马灯部分的html是通过js实现的，这部分html会添加在上面html header对象下面，生成的html结构如下：

　　id=marquee 的div是走马灯总的容器对象，h2是标题部分，a标签式一个个需要显示的内容，他外面又包裹了一个div。接下来定义marquee相关的css。

　　下面开始介绍最核心的js代码了。我们会通过ajax方式从远程连接获取json数据，json数据格式如下：

　　我们首先定义一个ajax方法。

　　接下来就需要对data数据进行处理。定义走马灯容器对象，标题对象，将json数据添加到走马灯对象中，设置走马灯宽度等。

　　为了实现动画的效果，我们创建一个自定义事件marquee-ready。这里比较重要的地方是，postLink.animate动画结束后函数的操作，函数里面通过$(this).appendTo(marquee.find('div').eq(0))，把当前a标签（也就是第一个a标签）移动到div容器的最后，这样可以把第二个a标签向前移，他就变成了第一个a标签，再通过marquee.trigger('marquee-ready')方法触发动画效果，就实现了不间断走马灯效果的实现。大家可以慢慢体会。

　　一切完毕之后，只需要简单的触发marquee-ready事件即可。

　　好了，走马灯的制作讲完了，大家可以结合demo自己亲手做一做。

<a href="http://www.vancl.com/?source=kbh1983&amp;sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>