我下面的代码可以很好地获取第一张图片的大小,然后在页面上的每张图片上添加margin-top和margin-left 。 但这是以第一张图片作为所有其他图片的基础。 如何遍历并使用每个图像的大小来查找左边缘和顶部边缘应使用的值? ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我想循环遍历div中的所有图像,并将“ left”设置为比上一个图像的left设置多50px。 我在语法上遇到了麻烦。 如何显示第i个img?
的HTML:
<div class="col-md-5 leftimage">
<div class="imageholder">
<img src="img/photo1.jpg" />
<div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
<div class="imageholder">
<img src="img/photo2.jpg" />
<div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
<div class="imageholder">
<img src="img/photo3.jpg" />
<div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
</div>
CSS:
.leftimage {
position: relative;
}
.leftimage .imageholder {
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
width: 300px;
width: max-content;
}
.imageholder:nth-child(1) {
/*left: 100px;*/
}
.imageholder:nth-child(2) {
/*left: 50px;*/
}
.caption {
color: gray;
font-size: 80%;
padding: 10px;
}
jQuery的:
for (var i = 0; i<$('.imageholder img').length; i++) {
$('.imageholder img')[i].css('left', i*50 + 'px'); //this syntax isn't right
}
如果您已经在使用jQuery,则最好使用.each()
函数。
$(".leftimage > div").each(function(index){
$(this).find("img").css("left", index*50 + "px");
});
这是一个例子:
$(".leftimage > div").each(function(index){ $(this).find('img').css("left", index*50 + "px"); $(this).find('.caption').text(index*50 + "px"); });
.leftimage { position: relative; } .leftimage .imageholder { position: relative; top: 0px; left: 0px; cursor: pointer; width: 300px; width: max-content; } .leftimage .imageholder img { height:100px; width:300px; } .caption { color: gray; font-size: 80%; padding: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="leftimage"> <div class="imageholder"> <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" /> <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </div> <div class="imageholder"> <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" /> <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </div> <div class="imageholder"> <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" /> <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </div> <div class="imageholder"> <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" /> <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </div> </div>
for (var i = 0; i<$('.imageholder img').length; i++) {
$($('.imageholder img')[i]).css('left', i*50 + 'px'); //this syntax isn't right
}
可能会成功
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.