gpt4 book ai didi

javascript - 如何根据位置数组对动态数量的项目进行动画处理

转载 作者:行者123 更新时间:2023-12-03 10:09:27 25 4
gpt4 key购买 nike

我想要实现的是根据位置数组移动 div 位置。对象数量未知,可能在 4 到 20 之间。

一次仅显示 4 个元素。

需要明确的是,我有 4 个项目的不同位置,每次(例如每 4 秒)项目都会改变位置,然后离开场景。(下图数字代表项目,字母代表位置)

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

这些是职位;

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)
];

这就是我目前所在的位置。我相信我被困住了。似乎可以工作,但它已损坏。

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");

}

html 是;

<div class="left">

<div class="holder">

<div class="tweet" data-pos="0">
<div class="avatar">
<img class="user" src="https://pbs.twimg.com/profile_images/478523550886658048/rLUgKkv7_normal.png" boder="0">
<div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
</div>
<div class="text">
<div class="username">Software AG Tu00fcrkiye <small>@SoftwareAGTR</small></div>
<div class="tweet">TEXT</div>
</div>
</div>

<div class="tweet" data-pos="0">
<div class="avatar">
<img class="user" src="https://pbs.twimg.com/profile_images/478523550886658048/rLUgKkv7_normal.png" boder="0">
<div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
</div>
<div class="text">
<div class="username">Software AG Tu00fcrkiye <small>@SoftwareAGTR</small></div>
<div class="tweet">TEXT!</div>
</div>
</div>

<div class="tweet" data-pos="0">
<div class="avatar">
<img class="user" src="https://pbs.twimg.com/profile_images/528538190798675969/La7toYrv_normal.jpeg" boder="0">
<div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
</div>
<div class="text">
<div class="username">Ece Vahapoglu <small>@ecevahapoglu</small></div>
<div class="tweet">text https://t.co/JDfP6ATMWk</div>
</div>
</div>

<div class="tweet" data-pos="0">
<div class="avatar">
<img class="user" src="https://pbs.twimg.com/profile_images/581787648584511488/Kxy-mZGu_normal.jpg" boder="0">
<div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
</div>
<div class="text">
<div class="username">Fatih Mert Esmer <small>@mertesmer</small></div>
<div class="tweet">#DASummit15 http://t.co/mpnBIh8zJK</div>
</div>
</div>

<div class="tweet" data-pos="0">
<div class="avatar">
<img class="user" src="https://pbs.twimg.com/profile_images/475291049724620800/TmAbgWKF_normal.jpeg" boder="0">
<div class="mask"><img src="/theme/images/avatar_mask.png" boder="0"></div>
</div>
<div class="text">
<div class="username">Agah Alptekin <small>@AgahAlptekin</small></div>
<div class="tweet">RT @digitalage: TEXT ://t.…</div>
</div>
</div>
</div>
</div>

最佳答案

使用问题中定义的相同的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

关于javascript - 如何根据位置数组对动态数量的项目进行动画处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30202728/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com