在不影响子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

回答

相关问题