我在我的 HTML 中放置了一些元素。主体的最大宽度为 1280px，边距自动。还有一些元素，我是正确的。在页面中间应该有 70 张图片从左到右(然后消失)。我试图使用 display: 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;
}
这是它的样子:
最佳答案
令人困惑的问题，但据我了解，您希望图像在附加图像时具有动态高度/宽度？如果是这样，你想让宽度/高度相等是什么？
如果是这样的话，这里就是答案:
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 会很棒。
更新
检查这个 fiddle :
这是您正在寻找的东西:
$(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);
}
});
如果需要，我可以做更多的工作，但希望这足以让你走上正轨..
关于javascript - 动态生成图像的相同位置和动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22171449/