Question

What I trying to achieve is moving div positions according to an array of positions. Number of objects is unknown could be between 4 to 20.

Only 4 elements shown at once.

To be clear, I've 4 item different positions and each time (like every 4 seconds) items will change position and then leave the scene. (below, numbers are represents items and letters are positions)

    request({method:"DELETE",url:"https://upload.box.com/api/2.0/files/"+req.body.id.id,
      headers:{
        'Authorization': 'Bearer ' + req.session.box_access_token,
        'If-Match':req.body.id.etag
      }
    },function(err, response, body) {
      next();
    });

these are the positions;

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: b a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: c b a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: d c b a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: - d c b a

Items: 1 2 3 4 5 6 7 8 9 10
Posi.: - - d c b a

This is where am I so far. I believe I'm stuck. Seems working but it is broken.

var positions = [
    { top: 0,   left: 1100, zoom:70 },//(out of scene)
    { top: 0,   left: 420,  zoom:70 },
    { top: 185, left: 217,  zoom:80 },
    { top: 310, left: 0,    zoom:100},
    { top: 646, left: 210,  zoom:80 },
    { top: 800, left: 210,  zoom:80 } //(out of scene)
];

html is;

var lastItemNo = -1;
var lastAnimation = 0;
var visibleItems = Array();

function tick(){

    visibleItems[visibleItems.length] = (lastItemNo+1);

    if((lastItemNo+1) == items.length){
        lastItemNo = -1;
    }else{
        lastItemNo++;
    }

    if(visibleItems.length>6){
       var removedItem = visibleItems.shift();
       $(".left .holder > .tweet").eq(removedItem).attr("data-pos",0).css({
            top:positions[0].top,
            left:positions[0].left,
            zoom:positions[0].zoom+"%",
        });
    }

    for(var i=0;i<visibleItems.length;i++){
//        console.log($(".left .holder > .tweet").eq(i).attr("data-pos"));
    }

    $.each(visibleItems,function(i,el){

        var currentItem = $(".left .holder > .tweet").eq(el);
        console.log(el);
        console.log(parseInt(currentItem.attr("data-pos"))+i);

        currentItem.animate({
            top:positions[parseInt(currentItem.attr("data-pos"))].top,
            left:positions[parseInt(currentItem.attr("data-pos"))].left,
            zoom:positions[parseInt(currentItem.attr("data-pos"))].zoom+"%",
        });

        currentItem.attr("data-pos", parseInt(currentItem.attr("data-pos"))+1 )


    });

    clog("tick");

}

Answer 1

使用问题中定义的相同positions数组：

var unusedItems = $('.left > .holder > .tweet').get(),
    usedItems = [];

// Initially hide all the items.
$(unusedItems).css({ top: positions[0].top, left: positions[0].left, zoom: positions[0].zoom + "%" });

function tick() {
    // If the usedItems array is full, remove the lead item and add it back
    // to the unusedItems array (as long as the item isn't null).
    if (usedItems.length == positions.length) {
        var item = usedItems.shift();
        if (item) {
            unusedItems.push(item);
        }
    }

    // Add an unused item to the usedItems array if there is one.
    // Otherwise add null as a placeholder.
    usedItems.push(unusedItems.shift() || null);

    // Loop through the usedItems array and animate the items to their
    // new positions, skipping the null placeholders.
    $.each(usedItems, function(i, item) {
        if (item) {
            var $item = $(item),
                position = positions[usedItems.length - 1 - i];
            $item.animate({ top: position.top, left: position.left, zoom: position.zoom + "%" });
        }
    });
}

如果项目数等于或大于职位数，则不会有任何null个占位符。

null占位符和以下代码行将职位与项目相关联：

position = positions[usedItems.length - 1 - i];

jsfiddle

How to animate dynamic number of items according to a array of positions

1 个答案: