Question

希望有人可以帮助我，我不知道在哪里查找

我正在尝试进行ArrayList<String>事件，以便更改3 onclick s的位置。

DIVS被放置在一个水平圆上，这意味着中间的那个应该是Div

左右z-index: 1 z-index: -1，左侧应滑到中间并更改onclick 右转到左边，中间到右边。

我该怎么做呢？像这样开始，但不会正确改变位置。 jsFiddle
代码段：

z-index

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

到目前为止感谢

Answer 1

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

一般情况下，我会使用CSS来定位/动画（通过过渡）元素，只需使用JS更改类。更清洁，更易于维护。

＆＃13;

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');
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Div移动位置和z指数

1 个答案: