事業部移動位置和z指數

Question

希望有人能幫助我，我不知道去哪裏找它

我試圖做一個onclick事件，這將改變的3個Div S中的位置。

的div放置像上的hoizontal圓，這意味着一個在中間應該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將始終返回0或1.所以這是什麼被添加到two和one職位。 （你很可能需要var plus = i/2;有）

一般來說，我會（通過轉換）的元素使用CSS定位/動畫，只是改變教學班，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>