Div 移动位置和 z 索引

Question

希望有人能帮帮我，我不知道去哪里找

我正在尝试做一个 onclick 事件，它将改变 3 Divs 的位置。

DIVS像在一个水平圆上一样放置，也就是说中间的应该是z-index: 1

左右z-index: -1 onclick,左边要滑到中间变z-index 右边到左边，中间到右边。

我怎样才能做到这一点？像这样开始，但不会正确改变位置。 jsFiddle
代码片段：

var i = 0;
while(i < (threeleft-50)){

  var plus = (i)%2; 

  three.style.left    = (threeleft-i)+'px';
  two.style.left      = (twoleft+plus)+'px';
  one.style.left      = (oneleft+plus)+'px';
  i++;
}

如果有更好的方法，还需要一点动画，请告诉我

到目前为止谢谢

Answer 1

一个问题是在 while 期间屏幕不会更新，因此您只能看到最终位置，而看不到动画。然后 plus = i%2 将始终 return 0 或 1。因此这就是添加到 two 和 one 位置的内容。（你很可能需要 var plus = i/2; 那里）

一般来说，我会使用 CSS 作为 positioning/animating（through transitions）的元素，然后用 JS 改变类。更干净，更易于维护。

function goleft() {
  var one = document.querySelector('.pos-one'),
    two = document.querySelector('.pos-two'),
    three = document.querySelector('.pos-three');

  one.classList.remove('pos-one');
  one.classList.add('pos-two');

  two.classList.remove('pos-two');
  two.classList.add('pos-three');

  three.classList.remove('pos-three');
  three.classList.add('pos-one');
}

function right() {
  var one = document.querySelector('.pos-one'),
    two = document.querySelector('.pos-two'),
    three = document.querySelector('.pos-three');

  one.classList.remove('pos-one');
  one.classList.add('pos-three');

  two.classList.remove('pos-two');
  two.classList.add('pos-one');

  three.classList.remove('pos-three');
  three.classList.add('pos-two');
}

.wrapper {
  position: relative;
  width: 800px;
  height: 400px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: grey;
}

.pic {
  width: 300px;
  height: 300px;
  position: absolute;
  border: 3px solid black;
  transition: all 0.5s;
}

#one {
  background-color: red;
}

#two {
  background-color: blue;
}

#three {
  background-color: green;
}

.pos-one {
  z-index: 150;
  top: 50px;
  left: 250px;
}

.pos-two {
  z-index: 50;
  top: 40px;
  left: 50px;
}

.pos-three {
  z-index: 50;
  top: 40px;
  left: 450px;
}

#bot {
  position: absolute;
  bottom: 0px;
  left: 360px;
}

<div class="wrapper">
  <div class="pic pos-one" id="one">1</div>
  <div class="pic pos-two" id="two">2</div>
  <div class="pic pos-three" id="three">3</div>
  <div id="bot">
    <button onclick="goleft()">left</button>
    <button onclick="right()">right</button>
  </div>
</div>

Div 移动位置和 z 索引

Div Moving position and z index

javascript

css

position

z-index

css-animations