如何来回移动正方形
[英]How to move a square back and forth
问题描述
I am trying to make a square move back and forth by pressing a button one time with javascript.
我试图用 javascript 按一次按钮来来回移动方形。 I can make it move to the right edge but don't know how to make it move back again.我可以让它移动到右边缘，但不知道如何让它再次移动回来。 Help appreciated.帮助表示赞赏。
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
whenever you are calling the myMove function it has pos set to 0. you should calculate position on the fly, and based on that logic you will be moving it right or left.每当您调用 myMove function 时，它的 pos 设置为 0。您应该即时计算 position，并根据该逻辑将其向右或向左移动。 assume the length is 350, you can do something like this:假设长度为 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
Not sure if this is exactly what you wanted but below code will animate the red block to move back and forth once every time you click the button.不确定这是否正是您想要的，但下面的代码会在您每次单击按钮时使红色块来回移动一次。
Basically you just maintain a variable that stores the direction of movement.基本上，您只需维护一个存储运动方向的变量。 So here you set forward to true if its moving forwards and false if backwards.所以在这里，如果它forward移动，则设置为true ，如果向后移动，则设置为false 。 And based on the direction ie value of forward , you either increase the value of pos or decrease it.并且根据方向，即forward的值，您可以增加pos的值或减少它。
Now if the block is moving forward and the position is 350, set forward to false .现在，如果块正在向前移动并且 position 为 350，则将forward设置为false 。
And finally when the direction is not forward and the position is 0, you clear the interval to end the animation, as the block reached back to initial position.最后，当方向不是正向且 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
I know you are asking for a javascript-based solution, but it's worth noting that this kind of presentation can be achieved with CSS alone.我知道您要求的是基于 javascript 的解决方案，但值得注意的是，仅使用CSS就可以实现这种演示。
So, for the sake of completeness, I am posting a CSS-only solution below.所以，为了完整起见，我在下面发布了一个纯 CSS 的解决方案。
NB There is a key difference between what CSS is capable of and what JS is capable of.注意CSS 的能力与 JS 的能力之间存在关键区别。
Note that in the CSS-only example below, each time you click the button, you will then have to click outside the button before the button will work again.请注意，在下面的纯 CSS 示例中，每次单击按钮时，都必须在按钮外部单击，然后按钮才能再次起作用。
CSS-only Working Example:仅 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
Not the prettiest solution but shoud do the trick.不是最漂亮的解决方案，但应该做的伎俩。 Essentially if the rectangle reaches the right edge the " inverseDirection " variable inverts from false to true and therefore the pos variable decrements instead of increment.本质上，如果矩形到达右边缘，“ inverseDirection ”变量就会从假反转为真，因此pos变量会递减而不是递增。 The opposite happens in the left edge.相反的情况发生在左边缘。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.