javascript動畫 - 使用上一個結束點的按鈕

我試圖根據按鈕觸發的某些值在上面的圖像上下滑動條。理想情況下，每次新的「開始」位置都是先前輸入的「結束」位置（除非有更好的方法）。這裏是低於
example image javascript動畫 - 使用上一個結束點的按鈕

我的代碼來完成大部分的我想要什麼，但我很想有欄中的每個按鈕點擊後的期望值之間的滑動順暢。謝謝！

<!DOCTYPE html> 
 
<html> 
 
</script> 
 

 
</body> 
 
</html> 
 

 
<style> 
 
#container { 
 
    width: 19px; 
 
    height: 186px; 
 
    position: relative; 
 
    background: clear; 
 
margin: 0px; 
 
} 
 
#animate { 
 
border: 1px solid white; 
 

 
    width: 32px; 
 
    height: 12px; 
 
    position: absolute; 
 
    background-color: #252525; 
 
} 
 

 
</style> 
 
<body> 
 

 
<p> 
 
<button onclick="myMove(0 ,20)">Move to Orange</button> 
 
<button onclick="myMove(20, 100)">Move to Green</button> 
 
<button onclick="myMove(100, 155)">Move to Blue</button> 
 
</p> 
 

 
<div id ="container"> 
 
<img src="https://dl.dropboxusercontent.com/u/377009668/webGL/stuff/legendVertical.png" alt="Fit Map Legend" style="float:left"> 
 
<div id ="animate"></div> 
 
</div> 
 

 
<script> 
 
function myMove(start, stop) { 
 
    var elem = document.getElementById("animate"); 
 
    
 

 
    var id = setInterval(frame, 5); 
 
    function frame() { 
 
    if (start == stop) { 
 
     clearInterval(id); 
 
    } else { 
 
     start++; 
 
     elem.style.top = start + 'px'; 
 
     
 
    } 
 
    } 
 
} 
 
</script> 
 

 
</body> 
 
</html>

來源

2016-03-18 Platypus17

爲什麼'null'在'myMove（NULL，5）'?? –

驚人的流暢的動畫使用CSS3過渡使用

data-*屬性而非內聯JS調用

簡單的JS代碼

var moveBtn = document.querySelectorAll("[data-move]"); var bar = document.getElementById("animate"); function move(el) { el.addEventListener("click", function(){ bar.style.transform = "translateY("+ this.dataset.move +"px)"; }); } [].forEach.call(moveBtn, move);

#container { width: 19px; height: 186px; position: relative; } #animate { border: 3px solid #444; width: 14px; height: 8px; position: absolute; top:0; -webkit-transition: 0.4s; transition: 0.4s; }

<p> <button data-move="20">Move to Orange</button> <button data-move="100">Move to Green</button> <button data-move="170">Move to Blue</button> </p> <div id ="container"> <img src="http://i.stack.imgur.com/3pLSG.png" alt="Fit"> <div id="animate"></div> </div>

來源

2016-03-18 17:01:50

是的，這種方法似乎更穩定。我怎麼能夠設置onload的初始位置？...或許 – Platypus17

爲了有鎖閂滑塊順利到下一個位置，而不是從頂部再次滑動，你需要知道標準目前正在啓動。

這可以通過幾種方式實現，或者通過全局變量存儲當前位置，或者每次調用myMove時重新計算當前位置。

您需要考慮的另一件事是滑塊可能需要向上滑動才能到達正確的位置，而不僅僅是向下。這是最容易處理的相同的if/else語句，您已經使用它來檢查該欄是否已經位於正確的位置。

使用全局變量來跟蹤當前位置的一個例子：

（作爲獎金myMove（）不再需要被賦予一個起始位置作爲一個參數，你只想位置酒吧結束在）。

<!DOCTYPE html> 
 
<html> 
 
</script> 
 

 
</body> 
 
</html> 
 

 
<style> 
 
#container { 
 
    width: 19px; 
 
    height: 186px; 
 
    position: relative; 
 
    background: clear; 
 
margin: 0px; 
 
} 
 
#animate { 
 
border: 1px solid white; 
 

 
    width: 32px; 
 
    height: 12px; 
 
    position: absolute; 
 
    background-color: #252525; 
 
} 
 

 
</style> 
 
<body> 
 

 
<p> 
 
<button onclick="myMove(20)">Move to Orange</button> 
 
<button onclick="myMove(100)">Move to Green</button> 
 
<button onclick="myMove(5)">Move to Blue</button> 
 
</p> 
 

 
<div id ="container"> 
 
<img src="https://dl.dropboxusercontent.com/u/377009668/webGL/stuff/legendVertical.png" alt="Fit Map Legend" style="float:left"> 
 
<div id ="animate"></div> 
 
</div> 
 

 
<script> 
 
var start = 0; 
 
function myMove(stop) { 
 

 
    var elem = document.getElementById("animate"); 
 
    
 

 
    var id = setInterval(frame, 5); 
 
    function frame() { 
 
    if (start == stop) { 
 
     clearInterval(id); 
 
    } else if (start > stop){ 
 
     start--; 
 
     elem.style.top = start + 'px'; 
 
    } else { 
 
     start++; 
 
     elem.style.top = start + 'px'; 
 
     
 
    } 
 
    } 
 
} 
 
</script> 
 

 
</body> 
 
</html>

來源

2016-03-18 17:02:33

這兩個答案非常感謝！ – Platypus17

多次點擊後，動畫開始不恰當地動作：D –

javascript動畫 - 使用上一個結束點的按鈕

回答

相關問題