如何来回移动正方形
[英]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.