動態生成圖像的相同位置和動畫

我有一些元素位於我的HTML中。主體的最大寬度爲1280像素，帶邊距自動。有幾個元素，我正確地浮動。在頁面中間應該有70個圖像從左到右（然後消失）。我試圖使這些元素的位置絕對地顯示：inline，但是由於開始和結束位置應該始終相同，並且圖像有寬度和高度，所以我不知道如何動態製作它。那是到目前爲止我的代碼：動態生成圖像的相同位置和動畫

HTML

<body> 
    <h1>Sweets</h1> 
    <div class="images"></div> 
    <div id="display"></div> 
    <div class="clear"></div> 
    <div id="maracons"></div> 
    <div id="cupCake"></div> 
</body>

JQUERY

for (var i = 0; i < 10; i++) { 
    $('.images').append('<img class="image' + i.toString() + '" src="img/' + arr[i][5] + '">'); 
    }

CSS

$leftPos: 1100px; 
$widthImage: 200px; 

.images{ 
    width: $widthProducts; 
    height: 200px; 
    position: absolute; 
    left: 1100px; 
    top: 0px; 
} 

.image-1{ 
    left: $leftPos; 
} 

.image-2{ 
    left: $leftPos - $widthImage; 
} 

.image-3{ 
    left: $leftPos - $widthImage*2; 
}

這裏是如何看起來像：

Position of my Elements

來源

2014-03-04 Babsi

你應該提供相關的HTML標記問題，也許是一個jsfiddle所以也許有人可以幫助你。 –

我已經添加了我的HTML，但我不確定現在是否比以前更有幫助.. – Babsi

混亂的問題，但是從我收集你想要的圖像具有當你追加他們的動態高度/寬度？如果是的話，你想要什麼寬度/高度相等？

如果那這裏的情況就是答案：如果這

var imgWidth = 10, imgHeight = 10; 
for (var i = 0; i < 10; i++) { 
    imgWidth = 100; //Set width 
    imgHeight = 100; //Set height 
    $('.images').append('<img style="width:' + imgWidth +'px!important; height:' + imgHeight + 'px !important; " class="image' + i.toString() + '" src="img/' + arr[i][5] +'">'); 
    }

重要的關鍵字將強制指定忽略類中指定的寬度/高度寬度/高度..

對不起不是你的意思，一個jsfiddle會很棒。

UPDATE

檢查此琴：

http://jsfiddle.net/xP8Qb/

這裏是有點事你要找的人：

$(document).ready(function() { 
var endpoint = 800; //you can set left+top endpoints and ref them in loop below.. 
for (var i = 0; i < 3; i++) { 
    var html = '<div class="imgs img'+i+'"></div>'; 
    setTimeout(function() { 
     $('.images').append(html); 
     $('.images>.imgs:last').animate({"left" : "300px"}, endpoint); 
    }, i * 1000); 
} 
});

我可以在需要時就可以進行更多的合作，但希望這足以讓你走上正軌。

來源

2014-03-04 12:27:06

感謝您的回答，但這不是我正在尋找的...我想將圖像放在相同的x和y座標和動畫到相同的終點。 – Babsi

好的抱歉 - 聽起來很有趣，讓我在這裏工作幾分鐘。 –

嗨@Babsi請看更新的提琴.. –

動態生成圖像的相同位置和動畫

回答

相關問題