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

时间:2023-02-08 20:07:23

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

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

  

  现在我们介绍如何制作走马灯,首先定义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