javascript - make a div move across the screen - Stack Overflow

admin管理员组

文章数量:1395237

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.

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

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.

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

• javascript
• html

Share Improve this question Follow asked May 22, 2013 at 18:41 DawnDawn 4311 gold badge11 silver badge33 bronze badges 1

• You forgot the rest of your script. – mzedeler Commented May 22, 2013 at 18:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Let's clean the code up a bit and implement what you want. In order:

1. Move to 800px
2. When 1 is done, go back, twice as fast, and double in size.

We'll do this using one scoped variable: speed. speed will be the default speed and direction.

I have also separated your code in setInterval in order to not block execution of the page.

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.

Think about what happens as soon as leftPosition has reached 799:

  ++leftPosition;                #leftPostion == 800

  if (leftPosition == 800){      #This bees true
    --leftPosition;              #leftPostion == 799

So you start where you left off, and this will repeat on the next time you call 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;

Here's a (mostly) CSS solution: http://tinker.io/7d393/6

HTML:

<div id="box"></div>

<div style="position: absolute; top: 200px"><button>Move it</button></div>

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:

//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

HTML:

<div id="box"></div>

<div style="position: absolute; top: 200px"><button>Move it</button></div>

CSS:

#box {
    background: blue;
    position: absolute;
    width:100px;
    height: 100px;
}

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);
    });
});

本文标签： javascriptmake a div move across the screenStack Overflow