javascript 在屏幕上移动一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16699330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make a div move across the screen
提问by Dawn
I need to make a colored div move horizontally to the right and when it hits the edge it should double in size and twice the speed rotating around the center.
我需要让一个彩色 div 向右水平移动，当它碰到边缘时，它的大小应该加倍，围绕中心旋转的速度应该加倍。
var topPosition = 50;
var leftPosition = 250;
var rightPosition = 800;
function move(){
var go = document.getElementById("box");
go.style.left = leftPosition + "px";
go.style.right = rightPosition + "px";
go.style.visibility = "visible";
++leftPosition;
if (leftPosition == 800){
--leftPosition;
it stops at 800 px like I told it but it wont go back
它像我说的那样停在 800 像素，但不会返回
回答by Sébastien Renauld
Let's clean the code up a bit and implement what you want. In order:
让我们稍微清理一下代码并实现你想要的。为了：
- Move to 800px
- When 1 is done, go back, twice as fast, and double in size.
- 移动到 800px
- 1 完成后，返回，速度加倍，大小加倍。
We'll do this using one scoped variable: speed. speedwill be the default speed and direction.
我们将做到这一点使用一个范围的变量：speed。speed将是默认速度和方向。
I have also separated your code in setIntervalin order to not block execution of the page.
setInterval为了不阻止页面的执行，我还分隔了您的代码。
function move() {
var elem = document.getElementById("box"),
speed = 1,
currentPos = 0;
// Reset the element
elem.style.left = 0+"px";
elem.style.right = "auto";
var motionInterval = setInterval(function() {
currentPos += speed;
if (currentPos >= 800 && speed > 0) {
currentPos = 800;
speed = -2 * speed;
elem.style.width = parseInt(elem.style.width)*2+"px";
elem.style.height = parseInt(elem.style.height)*2+"px";
}
if (currentPos <= 0 && speed < 0) {
clearInterval(motionInterval);
}
elem.style.left = currentPos+"px";
},20);
}
Fiddle: http://tinker.io/7d393. You'll see, it works.
小提琴：http: //tinker.io/7d393。你会看到，它有效。
回答by Robert McKee
Here's a (mostly) CSS solution: http://tinker.io/7d393/6
这是一个（主要是）CSS 解决方案：http: //tinker.io/7d393/6
HTML:
HTML：
<div id="box"></div>
<div style="position: absolute; top: 200px"><button>Move it</button></div>
CSS:
CSS：
#box {
background: blue;
position: absolute;
width:100px;
height: 100px;
}
#box.move{
-webkit-animation: myanim 5s;
animation: myanim 5s;
}
@-webkit-keyframes myanim
{
0% {top:0;left:0; width: 100px; height: 100px;}
66% {top:0;left:800px; width:100px;height:100px;}
67% {top:0;left:800px; width:200px; height: 200px;}
100% {top:0; left:0; width: 200px; height:200px;}
}
@keyframes myanim
{
0% {top:0;left:0; width: 100px; height: 100px;}
66% {top:0;left:800px; width:100px;height:100px;}
67% {top:0;left:800px; width:200px; height: 200px;}
100% {top:0; left:0; width: 200px; height:200px;}
}
JS:
JS：
//jQuery as I do not know what nav you are using.
$(function() {
$("button").click(function(){
$('#box').toggleClass('move')});
});
Here is a mostly jQuery solution: http://tinker.io/7d393/7
这是一个主要的 jQuery 解决方案：http: //tinker.io/7d393/7
HTML:
HTML：
<div id="box"></div>
<div style="position: absolute; top: 200px"><button>Move it</button></div>
CSS:
CSS：
#box {
background: blue;
position: absolute;
width:100px;
height: 100px;
}
JS:
JS：
//jQuery as I do not know what nav you are using.
$(function() {
$("button").click(function(){
$('#box')
.css({left:0,top:0,width:'100px',height:'100px'})
.animate({left:'800px',top:0,width:'100px',height:'100px'},3000)
.animate({left:'800px',top:0,width:'200px',height:'200px'},20)
.animate({left:0,top:0,width:'200px',height:'200px'},1500);
});
});
回答by Ikke
Think about what happens as soon as leftPositionhas reached 799:
想想一旦leftPosition达到 799会发生什么：
++leftPosition; #leftPostion == 800
if (leftPosition == 800){ #This becomes true
--leftPosition; #leftPostion == 799
So you start where you left off, and this will repeat on the next time you call move()
所以你从你停下的地方开始，下次你打电话时会重复 move()
To fix this, you need to add a direction to the movement:
要解决此问题，您需要为运动添加一个方向：
var topPosition = 50;
var leftPosition = 250;
var rightPosition = 800;
var direction = 1;
function move(){
var go = document.getElementById("box");
go.style.left = leftPosition + "px";
go.style.right = rightPosition + "px";
go.style.visibility = "visible";
leftPosition += direction;
if (leftPosition == 800){
direction = -1;
