Question

我的HTML中有一些元素。机身最大宽度为1280像素，自动上限。还有一些元素，我向右浮动。在页面的中间应该有70张图像从左到右（然后消失）。我试图通过显示使这些元素位于绝对位置：内联，但由于开始和结束位置应始终相同，并且图像具有宽度和高度，我不知道如何动态制作它。那是我的代码到目前为止：

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

Answer 1

令人困惑的问题，但从我收集的内容中，您希望图像在附加时具有动态高度/宽度？如果是这样你想让宽度/高度相等？

如果是这样的话就是答案：

 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] +'">');
   }

！important关键字将强制指定的宽度/高度忽略类中指定的宽度/高度。

抱歉，如果这不是你的意思，jsfiddle会很棒。

<强>更新

检查这个小提琴：

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

如果需要，我可以更多地工作，但希望这足以让你走上正轨......

动态生成图像的相同位置和动画

1 个答案: