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

标签：

相关文章