基于ajax的消息轮播

普通的消息轮播的话只要每次将首个div移除然后append到尾部.

现在要求消息数据不断从数据库获取新的.

开始的思路是放两个大的div分别包含n条消息记录,当第一个移出屏幕后就移除掉然后ajax请求n个消息包在新的div中放到尾部.

大概是代码写丑了, 毕竟每次又要获取大div和屏幕顶部div的高度容易出错, 在显示第一条的时候老是出问题.

其实大可不必这么麻烦.

拿现在的具体问题来说,因为当前屏幕最多显示3条信息大小,将ajax请求的条件改为计数小于3时就请求.

只用一个大的div,每次动画都移除掉顶部的div.

$(function(){
    SPEED = 3000;
    setInterval(scrollUp, SPEED);
});

function scrollUp() {
    var $this = $('.list-screen');
    count = $this.children('.content-item').length;
    curH = $('.content-item:first').outerHeight() + parseInt($('.content-item:first').css('margin-top'));

    if (count <= 3 ){
        var url = $this.data('url');
        $.get(url, function(result) {
            var html = '';
            $.each(result, function(i,k) {
                html+= '<div class="content-item"><div class="wxuser-info"><img class="user-avatar" src="'+ k.headimgurl +'"/>'
                + '<div class="user-name">' + k.en_name + '</div></div><div class="content-info-wrap">'
                + k.content + '</div></div>';
            });
            $this.append(html);
        });
    }
    $this.stop(true, false).animate({ top: '-=' + curH }, 800, function() {
        $this.children('div:first').remove();
        $this.css('top', 0);
    });
}