在不影響子DIV的情況下移動父DIV

-1

我有DIV和其中的一些DIV，屬性爲「position：absolute」。所有元素的大小和座標是已知的並且是固定的。我必須移動父DIV，但是用戶必須認爲所有兒童DIV都可以在他們的舊地點進行視覺活動。在不影響子DIV的情況下移動父DIV

這似乎很容易，但所有內部DIV的座標也必須改變，並且完全由父DIV的移動距離（例如，距離已知，例如20px）。我試圖改變父DIV的CSS，並在循環中改變所有子元素的座標，但它看起來不太好 - 我仍然可以看到子元素如何移動（移動速度很快，但是不可見）。我希望通過一個簡單的操作來移動父DIV，但DIV內的所有內容都會自動更改其位置，無人能注意到這一點。我怎樣才能做到這一點？性能很重要。

代碼示例：

<div id="parent" style="position:absolute; top:50px; left:100px; width:500px; height:300px;"> 
    <div id="child1" style="position:absolute; top:10px; left:15px; width:20px; height:20px;"></div> 
    <div id="child2" style="position:absolute; top:10px; left:55px; width:20px; height:20px;"></div> 
</div>

來源

2015-05-28 alexoy

發佈您的代碼，請 –

歡迎SO。請提供您迄今爲止所嘗試的代碼示例，以便我們瞭解涉及的內容。 – Shaggy

向主帖添加代碼示例 – alexoy

你可以爲任何任意項目（即不知道它的起始位置，它有多少孩子或孩子的起始位置）達到此目的，你希望我使用CSS的translateXtransform函數 - 通過給定的父母向右移動像素數量，然後使用該數字的負數來移動剩下的孩子，看起來它們是靜態的。

我在下面提供了幾個例子，前兩個是由JavaScript事件觸發的（爲了簡單起見，它們都是通過單擊一個按鈕觸發的），第一個只是「跳躍」第二個使用transition進行動畫製作，第二個使用CSS中的鼠標動作觸發，第一個在:hover，第二個在:focus。

Here's a Fiddle如果你想玩弄它。

UPDATE：Here's another Fiddle父母每次點擊按鈕都向左移動。

document.getElementById("button").addEventListener("click",function(event){ 
 
    var divs=document.querySelectorAll(".event"),x=divs.length; 
 
    while(x--) 
 
     divs[x].classList.toggle("shift"); 
 
    event.preventDefault(); 
 
},0);

/** PARENTS **/ 
 
.move{ 
 
    border:2px solid #000; 
 
    height:70px; 
 
    padding:40px 10px 10px; 
 
    position:absolute; 
 
    width:250px; 
 
} 
 
.move:first-of-type{left:20px;top:50px;} 
 
.move:nth-of-type(2){left:30px;top:130px;} 
 
.move:nth-of-type(3){left:40px;top:210px;} 
 
.move:nth-of-type(4){left:50px;top:290px;} 
 
/** CHILDREN **/ 
 
.move>div{ 
 
    background:#000; 
 
    height:20px; 
 
    position:absolute; 
 
    top:10px; 
 
    width:20px; 
 
} 
 
.move>div:first-child{left:15px;} 
 
.move>div:nth-child(2){left:45px;} 
 
.move>div:nth-child(3){left:75px;} 
 
.move>div:nth-child(4){left:105px;} 
 
/** ANIMATION **/ 
 
.animate,.animate>div{ 
 
    transition:transform .5s linear; 
 
} 
 
/** TRANSFORMATION **/ 
 
.shift,.hover:hover,.focus:focus{ 
 
    transform:translateX(100px); 
 
} 
 
.shift>div,.hover:hover>div,.focus:focus>div{ 
 
    transform:translateX(-100px); 
 
} 
 
/** MISC **/ 
 
button{ 
 
    top:10px; 
 
    left:10px; 
 
    position:relative; 
 
} 
 
*{box-sizing:border-box;line-height:20px;margin:0;outline:0;}

<button id="button">Click Me</button> 
 
<div class="move event"> 
 
    <div></div> 
 
    <p>I just jump across</p> 
 
</div> 
 
<div class="move event animate"> 
 
    <div></div> 
 
    <div></div> 
 
    <p>I transition across</p> 
 
</div> 
 
<div class="move hover animate"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <p>Hover over me</p> 
 
</div> 
 
<div class="move focus animate" tabindex="-1"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <p>Click on me</p> 
 
</div>

來源

2015-05-28 08:55:25 Shaggy

非常好的示例，我已經檢查過它 - 但不幸的是，div的座標不會被更改，無論是父母還是孩子。「left = 45px」在轉換後保留「left = 45px」。後來，我需要再次將父DIV移動100px，並且我無法再次將「shift」類追加20次，因此必須更改位置 – alexoy

@ qwerty007更符合您所尋找的內容？ http://jsfiddle.net/n33s7yb7/ – Shaggy

差不多，毛茸茸的。正如在主帖中提到的 - 我試圖改變父DIV的CSS並在循環中改變所有子元素的座標，但它看起來不太好 - 我仍然可以看到子元素如何移動到新的地方，並回到舊的。所以我正在尋找一個解決方案，無需在循環中手動修改每個孩子或其他東西 – alexoy

-3

嘗試使用CSS position: relative在你的子元素？並在寬度和高度上使用百分比。

來源

2015-05-28 07:32:23 weuolululu

在不影響子DIV的情況下移動父DIV

回答

相關問題