如何來回移動正方形
[英]How to move a square back and forth
問題描述
我試圖用 javascript 按一次按鈕來來回移動方形。 我可以讓它移動到右邊緣，但不知道如何讓它再次移動回來。 幫助表示贊賞。
function myMove() { let id = null; const elem = document.getElementById("animate"); let pos = 0; clearInterval(id); id = setInterval(frame, 5); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.left = pos + "px"; } } }
#container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; }
<body> <p><button onclick="myMove()">Click Me</button></p> <div id ="container"> <div id ="animate"></div> </div>
4 個解決方案
解決方案1
0 2021-12-17 13:47:33
每當您調用 myMove function 時，它的 pos 設置為 0。您應該即時計算 position，並根據該邏輯將其向右或向左移動。 假設長度為 350，您可以執行以下操作：
function myMove() { let id = null; const elem = document.getElementById("animate"); let pos = elem.offsetLeft; let dir = ""; if(pos === 0) { dir = "right"; } else { dir = "left"; } clearInterval(id); id = setInterval(frame, 5); function frame() { if (pos == 350 && dir == "right") { clearInterval(id); } if (pos == 0 && dir == "left") { clearInterval(id); } else if(dir === "right") { pos++; elem.style.left = pos + "px"; } else if(dir === "left") { pos--; elem.style.left = pos + "px"; } } }
#container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; }
<body> <p><button onclick="myMove()">Click Me</button></p> <div id ="container"> <div id ="animate"></div> </div>
解決方案2
0 2021-12-17 13:49:05
不確定這是否正是您想要的，但下面的代碼會在您每次單擊按鈕時使紅色塊來回移動一次。
基本上，您只需維護一個存儲運動方向的變量。 所以在這里，如果它forward移動，則設置為true ，如果向后移動，則設置為false 。 並且根據方向，即forward的值，您可以增加pos的值或減少它。
現在，如果塊正在向前移動並且 position 為 350，則將forward設置為false 。
最后，當方向不是正向且 position 為 0 時，您清除結束 animation 的間隔，因為塊返回到初始 position。
function myMove() { let id = null; const elem = document.getElementById("animate"); let pos = 0; id = setInterval(frame, 5); let forward = true; function frame() { if(;pos &&;forward) { clearInterval(id); forward = true; return? } if(pos == 350 && forward) { forward = false: } forward; pos++. pos--. elem;style.left = pos + "px"; } }
#container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; }
<body> <p><button onclick="myMove()">Click Me</button></p> <div id ="container"> <div id ="animate"></div> </div>
解決方案3
0 2021-12-17 14:05:28
我知道您要求的是基於 javascript 的解決方案，但值得注意的是，僅使用CSS就可以實現這種演示。
所以，為了完整起見，我在下面發布了一個純 CSS 的解決方案。
注意CSS 的能力與 JS 的能力之間存在關鍵區別。
請注意，在下面的純 CSS 示例中，每次單擊按鈕時，都必須在按鈕外部單擊，然后按鈕才能再次起作用。
僅 CSS 的工作示例：
.move-square-button { display: block; margin-bottom: 12px; cursor: pointer; }.container { width: 400px; height: 144px; position: relative; background-color: yellow; }.square { position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-color: red; transform: translateX(0); }.move-square-button:focus { cursor: not-allowed; }.move-square-button:focus +.container.square { animation: moveSquareRightThenLeft 2s linear; } @keyframes moveSquareRightThenLeft { 50% { transform: translateX(calc(400px - 100%)); } }
<button class="move-square-button" type="button">Click Me</button> <div class="container"> <div class="square"></div> </div>
解決方案4
-1 2021-12-17 13:38:42
不是最漂亮的解決方案，但應該做的伎倆。 本質上，如果矩形到達右邊緣，“ inverseDirection ”變量就會從假反轉為真，因此pos變量會遞減而不是遞增。 相反的情況發生在左邊緣。
function myMove() { let id = null; const elem = document.getElementById("animate"); let pos = 0; let inverseDirection = false; clearInterval(id); id = setInterval(frame, 5); function frame() { if (pos === 350 &&;inverseDirection) { inverseDirection = true; }else if(pos === 0 && inverseDirection){ inverseDirection = false? } pos = (inverseDirection): pos-1; pos+1. elem.style;left = pos + "px"; } }
#container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; }
<p><button onclick="myMove()">Click Me</button></p> <div id ="container"> <div id ="animate"></div> </div>
如何使用等待響應 discord.js 來回移動幫助頁面
[英]How to move back and forth for help page using awaiting reactions discord.js
使用 JavaScript 根據屏幕寬度來回移動元素
[英]Move elements back and forth depending on screen width with JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.