[英]How do I increase the margin top and left on each image
我在一些圖片前有一些文字。 我想在可變數量的圖像上實現級聯效果，就像在下面的圖片中一樣。 我不知道最后會有多少張圖片，所以現在我有3張。 我也不知道確切的高度和寬度，但現在我將其設置為300 x 500px； 我正在嘗試使用jquery對圖像進行樣式設置，但到目前為止，我只能對所有圖像應用相同的邊距。 我相信我需要的是一個循環，而不是遍歷每個圖像，然后將50px添加到空白變量中，然后使用新的margin變量傳遞到下一個圖像，然后將另外50px添加到空白變量中，依此類推...
簡而言之：您知道我在通過每張圖像時如何增加邊距嗎？ 這樣做最干凈的方法是什么？
這是我的代碼：
function cascade() { $('.journal-single-img').each(function(){ var marginLeft = 50; var marginTop = 100; $(this).css({ left:marginLeft, top:marginTop }); marginLeft= marginLeft + 50; marginTop= marginTop + 50; }); } cascade()
img.journal-single-img { position: relative; width: 300px; height: 450px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <body> <p>Aenean vel aliquet orci, et dapibus purus. Etiam fringilla neque vitae est condimentum, porta elementum nulla tincidunt. Morbi posuere odio lectus. </p> <p> <a href="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oesiqbS7jo1sbdxw4o1_1280_red.jpg"> <img class="journal-single-img" src="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oesiqbS7jo1sbdxw4o1_1280_red.jpg" alt="" width="300" height="500" > </a> </p> <p> <a href="http://jadepalacecollective.com/wp-content/uploads/2017/02/Christies1_red.jpg"> <img class="journal-single-img" src="http://jadepalacecollective.com/wp-content/uploads/2017/02/Christies1_red.jpg" alt="" width="300" height="500"> </a> </p> <p> <a href="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oja76fgsbR1qdsqp6o1_500_red.jpg"> <img src="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oja76fgsbR1qdsqp6o1_500_red.jpg" alt="" width="300" height="500" class="journal-single-img"> </a> </p> </body>
您應該真正在.each函數中使用索引，代碼看起來更簡潔。 此外，您對該部分進行編程的方式只是保持對marginLeft和marginTop的重置。 我重寫了它，並添加了一個容器div以使代碼功能更流暢：
function cascade() { $('.journal-single-img').each(function(index){ var marginLeft = 50; var marginTop = 100; $(this).css({ left:marginLeft*index, top:marginTop*index }); }); } cascade()
.container { position:relative; } img.journal-single-img { position: absolute; width: 300px; height: 450px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <body> <p>Aenean vel aliquet orci, et dapibus purus. Etiam fringilla neque vitae est condimentum, porta elementum nulla tincidunt. Morbi posuere odio lectus. </p> <div class="container"> <p> <a href="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oesiqbS7jo1sbdxw4o1_1280_red.jpg"> <img class="journal-single-img" src="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oesiqbS7jo1sbdxw4o1_1280_red.jpg" alt="" width="300" height="500" > </a> </p> <p> <a href="http://jadepalacecollective.com/wp-content/uploads/2017/02/Christies1_red.jpg"> <img class="journal-single-img" src="http://jadepalacecollective.com/wp-content/uploads/2017/02/Christies1_red.jpg" alt="" width="300" height="500"> </a> </p> <p> <a href="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oja76fgsbR1qdsqp6o1_500_red.jpg"> <img src="http://jadepalacecollective.com/wp-content/uploads/2017/02/tumblr_oja76fgsbR1qdsqp6o1_500_red.jpg" alt="" width="300" height="500" class="journal-single-img"> </a> </p> </div> </body>
當前，每次執行每個循環時，您都在重置marginLeft和marginTop ，如果將這些變量移到原始函數中，則不會重置，而是對其進行迭代，這將允許級聯效果：
function cascade() {
var marginLeft = 50;
var marginTop = 100;
$('.journal-single-img').each(function(){
$(this).css({
left: marginLeft,
top: marginTop
});
marginLeft = marginLeft + 50;
marginTop = marginTop + 50;
});
}
cascade()
您可以在循環之前定義變量。
function cascade() {
var marginLeft = 50;
var marginTop = 50;
$('.journal-single-img').each(function(){
$(this).css({
left:marginLeft,
top:marginTop
});
marginLeft = marginLeft + 50;
marginTop = marginTop + 50;
});
}
cascade();
如果margin-left = 0px，如何更改margin-left-increase函數以使其禁用？
[英]How can I alter my margin-left-increase function to disable if margin-left = 0px?
我可以根據我的 window 的大小來增加 css 的邊距頂部嗎？
[英]Can I increase the margin-top in css based on how small I make my window?
如何使用 Plotly 格式化數字並將小數點增加到左側？
[英]How do I format a number and increase the decimal point to the left with Plotly?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.