Fatal编程技术网
  • javascript/
  • Javascript 如何使用JQuery键向下移动图片？

Javascript 如何使用JQuery键向下移动图片？

javascript jquery html css

Javascript 如何使用JQuery键向下移动图片？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,你好，我是网络编程的初学者。我在“CodeAcademy.com”学习。我制作了一个小页面来练习我已经学过的东西，但是我的代码出了问题。 我想让logo继续按W-A-S-D并编写代码，但有些地方出了问题 我的HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> <script src='script.js'><

你好，我是网络编程的初学者。我在“CodeAcademy.com”学习。我制作了一个小页面来练习我已经学过的东西，但是我的代码出了问题。

我想让logo继续按W-A-S-D并编写代码，但有些地方出了问题

我的HTML

<!DOCTYPE html>
<html>
 <head>
    <link rel="stylesheet" href="style.css" />
    <script src='script.js'></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">     </script>
    <title></title>
</head>
<body>
    <div id='menu'>
        <h3>Header 1</h3>
        <div><p>The jQuery UI library bestows on us a lot of magic, including the datepicker widget. We saw how to use that in the date picker project, but with our knowledge of JavaScript, we can add all kinds of bells and whistles.</p></div>
        <h3 id='h3'>Header 2</h3>
        <div id="move"><img src="http://www.gravatar.com/avatar/9aba2f4a04dbccedb70a93033b55b166?d=retro&s=140"/></div>
        <h3>Header 3</h3>
        <div><img id='2' src="http://www.gravatar.com/avatar/9aba2f4a04dbccedb70a93033b55b166?d=retro&s=140"/></div>
    </div>   
</body>
}))

有什么问题吗？

我不能100%确定这是否是您的问题，但这不是一个合适的选择器：

$（'move'）

应该是，快走，快走

我不能100%确定这是否是您的问题，但这不是一个合适的选择器：

$（'move'）

应该是，快走，快走

您需要将
keydown
函数绑定到文档
body
标记

因此，您需要将当前代码替换为

$('body').keydown(function(key){
并将您的
案例
语句更改为：

switch(parseInt(key.which)) {
因此，您的完整代码应该是：

$(document).ready(function () {

   $('body').keydown(function (key) {

       switch (parseInt(key.which)) {
           case 65:
               $('#move').animate({
                   left: "-=10px"
               }, 'fast');
               break;
           case 83:
               $('#move').animate({
                   top: "+=10px"
               }, 'fast');
               break;
           case 87:
               $('#move').animate({
                   top: "-=10px"
               }, 'fast');
               break;
           case 68:
               $('#move').animate({
                   left: "+=10px"
               }, 'fast');
               break;
           default:
               break;
       }
   });
}))

您需要将
keydown
函数绑定到文档
body
标记

因此，您需要将当前代码替换为

$('body').keydown(function(key){
并将您的
案例
语句更改为：

switch(parseInt(key.which)) {
因此，您的完整代码应该是：

$(document).ready(function () {

   $('body').keydown(function (key) {

       switch (parseInt(key.which)) {
           case 65:
               $('#move').animate({
                   left: "-=10px"
               }, 'fast');
               break;
           case 83:
               $('#move').animate({
                   top: "+=10px"
               }, 'fast');
               break;
           case 87:
               $('#move').animate({
                   top: "-=10px"
               }, 'fast');
               break;
           case 68:
               $('#move').animate({
                   left: "+=10px"
               }, 'fast');
               break;
           default:
               break;
       }
   });
}))

哦，终于找到了答案，我在CSS代码中遇到了一个问题，我应该把一些对象放在位置：相对

h3{
border:2px solid black;
border-radius:5px;
background-color: #8C001A;
margin-bottom:0;
}
body{
background-color:#800517;   
}
#menu div{
border-radius:5px;
background-color: #C11B17;
position:relative;
}

#profile{
background-color: #7D0552;
height: 200px;
}
#move{
position:relative;
}
谢谢大家的帮助：）

哦，终于找到了答案，我在CSS代码中遇到了一个问题，我应该把一些对象定位为：相对

h3{
border:2px solid black;
border-radius:5px;
background-color: #8C001A;
margin-bottom:0;
}
body{
background-color:#800517;   
}
#menu div{
border-radius:5px;
background-color: #C11B17;
position:relative;
}

#profile{
background-color: #7D0552;
height: 200px;
}
#move{
position:relative;
}
谢谢大家的帮助：）

你可以用数字开始ID和类，我不知道你从哪里得到的from@Ian好吧，在HTML5中技术上是有效的，但如果你真的想用
#2{}
等来设计它的样式，在CSS中就不行了。我假设你的意思是它在各个方面都是有效的，而你没有指定。但这很有趣，我不确定我是否知道。再说一遍，我从来没有遇到过这种情况，因为我的
id
s/
class
s不是以数字开头的。我认为它们不匹配很奇怪-你可以在HTML5中这样做，但不能在CSS中使用：
\32{}
相当于你所期望的
\2{}
你可以用数字启动ID和类，我不知道你从哪里得到这些from@Ian好吧，在HTML5技术上是有效的，但是如果你真的想用
#2{}
等来设计它的样式，就不用CSS了。我假设你的意思是它在各个方面都是有效的，而你没有指定。但这很有趣，我不确定我是否知道。再说一遍，我从来没有遇到过这种情况，因为我的
id
s/
class
s不是以数字开头的。我认为这很奇怪，它们不匹配-你可以在HTML5中使用，但不能在CSS中使用：
\32{}
相当于你所期望的
\2{}
到docodeademy有自己的论坛来询问他们的教程。您可以去询问与jQuery相关的代码questions@Zeaklous谁说这是教程里的？OP上说，
我正在制作一个小页面来练习我已经学到的东西
@Ian论坛上也有这样的论坛。我不是说他不应该在那里发帖，只是让他知道他们有自己的（我自己经常看）@Zeaklous啊好吧，听起来就像你说他们不应该在这里发帖一样。很好的建议：）CodeAdademy有自己的论坛来询问他们的教程。您可以去询问与jQuery相关的代码questions@Zeaklous谁说这是教程里的？OP上说，
我正在制作一个小页面来练习我已经学到的东西
@Ian论坛上也有这样的论坛。我不是说他不应该在那里发帖，只是让他知道他们有自己的（我自己经常看）@Zeaklous啊好吧，听起来就像你说他们不应该在这里发帖一样。很好的建议：）更改了，但仍然不起作用：（可能是因为图片在一个菜单选项卡中…我不知道。我没有那么多知识。更改了，但仍然不起作用：（可能它不起作用，因为图片在一个菜单选项卡中……我不知道。我没有那么多知识。是的，如果要更改
顶部
、
右侧
、
底部
或
左侧
值，必须在
元素
上设置
位置
属性。是的，必须设置
位置顶部
、
右侧
、
底部
或
左侧
值，请在
元素上设置ode>属性。