使用Javascript移动图像

时间：2015-05-05 13:53:15

标签： javascript

我可以让图像转动而不是移动，我想我已经接近但却无法弄明白。

给出了CSS，body和window.onload函数，因此我无法更改它们。分配是创建图像，然后根据按下的键移动图像。

有人能告诉我我做错了什么吗？ 

<!doctype html>
<html>
<head>
  <title> setTimeout </title>
  <meta charset="utf-8">
  <style>
    html, body {
      margin: 0px;
      padding: 0px;
    }

    div#container {
      margin-left: auto;
      margin-right: auto;
      width: 30%;     
    }

    div.bug {
      position: absolute;
      width: 100px;
      height: 76px;
      -webkit-transition: -webkit-transform 2s;
      -moz-transition: -moz-transform 2s;
      -o-transition: -o-transform 2s;
      transition: transform 2s;
    }

    .up {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
    }

   .down {
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     transform: rotate(-90deg);
   }

   .right {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
    }

   .left {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
  </style>
  <script>
    // your code here

   function Bug () {
   //Assign local variables to be used within the function, call 
   //function to assign bug an id

   var bugDiv = document.getElementById("container");
   var bugId = getId();

  //call functions to display instructions and bug           
  displayBug();

  //public method to move bug only when certain keys are pressed. This 
  //function will move the showBug div created by the display
  //function.            

  this.moveBug = function (e) {
     if (window.event) {
     number = window.event.keyCode; 
      if (number == 106) {
        moveDown();
      }
      if (number == 107) { 
        moveUp();
      }
      if (number == 104) { 
        moveLeft();
      }
      if (number == 108) { 
        moveRight();
      }
    }
   } 

   function moveDown (){
     console.log("down");
     showBug.setAttribute("class", "down")
     showBug.style.top = parseInt(showBug.style.top) + 5 + 'px';
   }

   function moveUp () {
    console.log("up");
    showBug.setAttribute("class", "up");
    showBug.style.top = parseInt(showBug.style.top) - 5 + 'px';
   }

   function moveLeft() {
   console.log("left");
   showBug.setAttribute("class", "left");
   showBug.style.left = parseInt(showBug.style.left) - 5 + 'px';
   }

   function moveRight() {
   console.log("right");
   showBug.setAttribute("class", "right");
   showBug.style.left = parseInt(showBug.style.left) + 5 + 'px';
   }


  //private function to display bug in the orginal container div on the
  //page                  
  function displayBug() {     
    showBug = document.createElement("img");
    showBug.setAttribute("id", bugId);
    showBug.setAttribute("class", "bug"); 
    showBug.src = "/AdvJS/ladybug.png"; 
    showBug.style.marginTop = "200px"
    showBug.style.marginLeft = "100px"      
    bugDiv.appendChild(showBug);       
  }

  //private function to assign bug an id     
  function getId() {
    var bugs = document.querySelectorAll(".bug");
    if (bugs) {
      return bugs.length;
    }
    return 0;
  }    
}

window.onload = function() {
    var bug = new Bug("container");

    // j = 106 (down), k = 107 (up), h = 104 (left) , l = 108 (right)
    document.onkeypress = function(e) {
        bug.moveBug((typeof e.which == "number") ? e.which : e.keyCode);
    }
};
 </script>
</head>
<body>
 <div id="container"></div>
</body>
</html>

4 个答案:

答案 0 :(得分：2)

检查一下。你的js有问题。

  • 您必须在创建元素时设置top和left。
  • 设置showBug.setAttribute（“class”，“down”）时，类bug将被删除。因此，之后相应的样式将不适用。

$(function () {
    
   function Bug () {
   //Assign local variables to be used within the function, call 
   //function to assign bug an id

   var bugDiv = document.getElementById("container");
   var bugId = getId();

  //call functions to display instructions and bug           
  displayBug();

  //public method to move bug only when certain keys are pressed. This 
  //function will move the showBug div created by the display
  //function.            

  this.moveBug = function (e) {
      console.log(window.event.keyCode);
     if (window.event) {
     number = window.event.keyCode; 
      if (number == 106) {
        moveDown();
      }
      if (number == 107) { 
        moveUp();
      }
      if (number == 104) { 
        moveLeft();
      }
      if (number == 108) { 
        moveRight();
      }
    }
   } 

   function moveDown (){
     console.log("down");
     showBug.setAttribute("class", "bug down")
     showBug.style.top = parseInt(showBug.style.top) + 5 + 'px';
       console.log('top' + showBug);
   }

   function moveUp () {
    console.log("up");
    showBug.setAttribute("class", "bug up");
    showBug.style.top = parseInt(showBug.style.top) - 5 + 'px';
   }

   function moveLeft() {
   console.log("left");
   showBug.setAttribute("class", "bug left");
   showBug.style.left = parseInt(showBug.style.left) - 5 + 'px';
   }

   function moveRight() {
   console.log("right");
   showBug.setAttribute("class", "bug right");
   showBug.style.left = parseInt(showBug.style.left) + 5 + 'px';
   }


  //private function to display bug in the orginal container div on the
  //page                  
  function displayBug() {     
    showBug = document.createElement("img");
    showBug.setAttribute("id", bugId);
    showBug.setAttribute("class", "bug"); 
    showBug.src = "http://etc.usf.edu/clipart/70200/70297/70297_258_a-1b_s_lg.gif"; 
    showBug.style.top = "100px"
    showBug.style.left = "100px"      
    bugDiv.appendChild(showBug);       
  }

  //private function to assign bug an id     
  function getId() {
    var bugs = document.querySelectorAll(".bug");
    if (bugs) {
      return bugs.length;
    }
    return 0;
  }    
}

    var bug = new Bug("container");

    $(document).bind('keypress', function(e) {
	
        bug.moveBug((typeof e.which == "number") ? e.which : e.keyCode);

    });
});
html, body {
      margin: 0px;
      padding: 0px;
    }

    div#container {
      margin-left: auto;
      margin-right: auto;
      width: 30%;  
    height:20px;
    border:1px solid black;
    }

    div .bug {
      position: absolute;
      width: 100px;
      height: 76px;
      -webkit-transition: -webkit-transform 2s;
      -moz-transition: -moz-transform 2s;
      -o-transition: -o-transform 2s;
      transition: transform 2s;
    }

 .up {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

   .down {
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
 transform: rotate(-90deg);
   }

   .right {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);
}

   .left {
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
 <div id="container"></div>
</body>

答案 1 :(得分：0)

首先，您要移动的对象的位置需要位于position: relative，第二次使用marginTop，marginLeft top和left，等。

向上移动物体：showBug.style.marginTop = parseInt(showBug.style.marginTop) - 10 + 'px'，左侧相同。

工作示例：here

答案 2 :(得分：0)

在position函数中以编程方式设置displayBug()，以提供原点：

showBug.style.position = "absolute";
showBug.style.left = "10px";
showBug.style.right = "10px";
showBug.style.top = "10px";
showBug.style.bottom = "auto";

下面的示例，使用按钮h，j，k，l移动（并且您必须先将窗口对焦）：

function Bug() {
  //Assign local variables to be used within the function, call 
  //function to assign bug an id

  var bugDiv = document.getElementById("container");
  var bugId = getId();

  //call functions to display instructions and bug           
  displayBug();

  //public method to move bug only when certain keys are pressed. This 
  //function will move the showBug div created by the display
  //function.            

  this.moveBug = function(e) {
    if (window.event) {
      number = window.event.keyCode;
      if (number == 106) {
        moveDown();
      }
      if (number == 107) {
        moveUp();
      }
      if (number == 104) {
        moveLeft();
      }
      if (number == 108) {
        moveRight();
      }
    }
  }

  function moveDown() {
    console.log("down");
    showBug.setAttribute("class", "bug down")
    showBug.style.top = parseInt(showBug.style.top) + 5 + 'px';
  }

  function moveUp() {
    console.log("up");
    showBug.setAttribute("class", "bug up");
    showBug.style.top = parseInt(showBug.style.top) - 5 + 'px';
  }

  function moveLeft() {
    console.log("left");
    showBug.setAttribute("class", "bug left");
    showBug.style.left = parseInt(showBug.style.left) - 5 + 'px';
  }

  function moveRight() {
    console.log("right");
    showBug.setAttribute("class", "bug right");
    showBug.style.left = parseInt(showBug.style.left) + 5 + 'px';
  }


  //private function to display bug in the orginal container div on the
  //page                  
  function displayBug() {
    showBug = document.createElement("img");
    showBug.setAttribute("id", bugId);
    showBug.setAttribute("class", "bug");
    showBug.src = "http://icons.iconarchive.com/icons/jen/animal/32/Lady-bug-icon.png";
    showBug.style.marginTop = "20px";
    showBug.style.marginLeft = "20px";
    showBug.style.position = "absolute";
    showBug.style.left = "10px";
    showBug.style.right = "10px";
    showBug.style.top = "10px";
    showBug.style.bottom = "auto";
    bugDiv.appendChild(showBug);
  }

  //private function to assign bug an id     
  function getId() {
    var bugs = document.querySelectorAll(".bug");
    if (bugs) {
      return bugs.length;
    }
    return 0;
  }
}

window.onload = function() {
  var bug = new Bug("container");

  // j = 106 (down), k = 107 (up), h = 104 (left) , l = 108 (right)
  document.onkeypress = function(e) {
    bug.moveBug((typeof e.which == "number") ? e.which : e.keyCode);
  }
};
html,
body {
  margin: 0px;
  padding: 0px;
}
div#container {
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}
.bug {
  position: absolute;
  width: 30px;
  height: 25px;
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  -o-transition: -o-transform 2s;
  transition: transform 2s;
}
.up {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.down {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.right {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.left {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
<div id="container"></div>

答案 3 :(得分：0)

嘿TRogers，
这是学习JavaScript和CSS基础知识的一个很好的练习......但对于stackoverflow来说这不是一个好问题。有些人不会觉得好笑:) 但我心情很好，所以我为你做了一个片段。如果你敢于欺骗自己，你可以找到解决问题的方法。 

<!doctype html>
<html>
<head>
  <title> setTimeout </title>
  <meta charset="utf-8">
  <style>
    html, body {
      margin: 0px;
      padding: 0px;
    }

    div#container {
      margin-left: auto;
      margin-right: auto;
      width: 30%;     
    }

    div.bug {
      position: absolute;
      width: 100px;
      height: 76px;
      -webkit-transition: -webkit-transform 2s;
      -moz-transition: -moz-transform 2s;
      -o-transition: -o-transform 2s;
      transition: transform 2s;
    }

    .up {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
    }

   .down {
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     transform: rotate(-90deg);
   }

   .right {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
    }

   .left {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
  </style>
  <script>
    // your code here

   function Bug () {
   //Assign local variables to be used within the function, call 
   //function to assign bug an id

   var bugDiv = document.getElementById("container");
   var bugId = getId();

  //call functions to display instructions and bug           
  displayBug();

  //public method to move bug only when certain keys are pressed. This 
  //function will move the showBug div created by the display
  //function.            

  this.moveBug = function (e) {
    console.log('event',e)
      
      if (e === 106) {
        moveDown();
      }
      else if (e === 107) { 
        moveUp();
      }
      else if (e === 104) { 
        moveLeft();
      }
      else if (e === 108) { 
        console.log('moving right');
        moveRight();
      }else {
        console.log('unknown command!');
      }
    
   } 

   function moveDown (){
     console.log("down");
     showBug.setAttribute("class", "down")
     showBug.style.marginTop = parseInt(showBug.style.marginTop) + 5 + 'px';
   }

   function moveUp () {
    console.log("up");
    showBug.setAttribute("class", "up");
    showBug.style.marginTop = parseInt(showBug.style.marginTop) - 5 + 'px';
   }

   function moveLeft() {
   console.log("left");
   showBug.setAttribute("class", "left");
   showBug.style.marginLeft = parseInt(showBug.style.marginLeft) - 5 + 'px';
   }

   function moveRight() {
   console.log("right yeaahhh");
   showBug.setAttribute("class", "right");
   showBug.style.marginLeft = parseInt(showBug.style.marginLeft) + 5 + 'px';
   }


  //private function to display bug in the orginal container div on the
  //page                  
  function displayBug() {     
    showBug = document.createElement("img");
    showBug.setAttribute("id", bugId);
    showBug.setAttribute("class", "bug"); 
    showBug.src = "/AdvJS/ladybug.png"; 
    showBug.style.marginTop = "200px"
    showBug.style.marginLeft = "100px"      
    bugDiv.appendChild(showBug);       
  }

  //private function to assign bug an id     
  function getId() {
    var bugs = document.querySelectorAll(".bug");
    if (bugs) {
      return bugs.length;
    }
    return 0;
  }    
}

window.onload = function() {
    var bug = new Bug("container");

    // j = 106 (down), k = 107 (up), h = 104 (left) , l = 108 (right)
    document.onkeypress = function(e) {
        bug.moveBug((typeof e.which === "number") ? e.which : e.keyCode);
    }
};
 </script>
</head>
<body>
 <div id="container"></div>
</body>
</html>

注意：这不是最好的方法，只需几分钟就可以给你一个提示。请尝试解决它，以便更好地理解！祝好运并玩得开心点！ ：）

相关问题
最新问题