IMG使用HTML和JavaScript/jQuery在网页上不移动。我的代码错了吗？_Javascript_Jquery_Html

IMG使用HTML和JavaScript/jQuery在网页上不移动。我的代码错了吗？

javascript jquery html

IMG使用HTML和JavaScript/jQuery在网页上不移动。我的代码错了吗？,javascript,jquery,html,Javascript,Jquery,Html,我在这里使用的代码几乎是从代码学院课程中直接窃取的。我真的只是想自己玩一玩，但什么也没发生。图像不会加载，也不会移动。我的第一个问题是没有图像加载，为什么没有任何东西移动，或者损坏的图像仍然可以移动？我的总体目标是在按下aswd时使对象移动不管怎样，这是我的HTML <!DOCTYPE html> <html> <link rel='stylesheet' type='text/css' href='small.css'/>

我在这里使用的代码几乎是从代码学院课程中直接窃取的。我真的只是想自己玩一玩，但什么也没发生。图像不会加载，也不会移动。我的第一个问题是没有图像加载，为什么没有任何东西移动，或者损坏的图像仍然可以移动？我的总体目标是在按下aswd时使对象移动

不管怎样，这是我的HTML

    <!DOCTYPE html>
    <html>
<link rel='stylesheet' type='text/css' href='small.css'/>
        <script type="text/javascript" src="sjs.js"></script>
        <script  type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <body>
            <img src="F:\website\MiniWebSite\drillman1.png"/>
        </body>
    </html>

我试着在这里看其他的例子，但我没有看到任何像这样的

哎呀。。忘了一些CSS

img {
    position: absolute;
    left: 0;
    top: 0;
}

编辑更多：

因此，我应该更改所有代码以反映我所做的更改。我确实裁剪了我的img并将其重新保存为PNG。我可以在运行文件时将其上载。。但由于某种原因，我无法让它移动。。。查看我的更改。谢谢你的帮助。我真的想真正了解我在做什么，一旦我做到了，我就觉得我可以帮助别人。谢谢。

看起来该URL会将您带到网页，而不是图像。这是您要查找的图像的URL我相信：

但是你可能想下载图像并编辑它，因为png也包含一个相当大的白色背景。

图像src不指向图像，只指向一个网页。这就是加载问题

对于JavaScript，它应该更像这样

var img = $("img");

$(document).keydown(function(e){
    var offset = img.offset();

    switch(e.keyCode) {
         case 37: // Left
              img.animate({left: offset.left - 10 + 'px'}, 100);
              break;
         case 38: // Up
              img.animate({top: offset.top - 10 + 'px'}, 100);
              break;
         case 39: // Right
              img.animate({left: offset.left + 10 + 'px'}, 100);
              break;
        case 40: // Down
              img.animate({top: offset.top + 10 + 'px'}, 100);
              break;
    }
});

好的，所以我注意到，即使图像未加载错误图标也应该移动。还有语法错误。奇怪的是

$img.animate({left: "-= 10px"}, 'fast');

不起作用，但这个

$img.animate({left: "-=10px"}, 'fast');

做

此外，图像位置应该是绝对的，而不是相对的，您需要首先指定左侧和顶部位置。请保持在顶部或底部、左侧或右侧

这是应该做到的

：

var $img = $("img");
$(document).keydown(function (event) {
    switch (event.which) {
        case 37: // Left.
            $img.animate({left: '-=10px'}, 100);
            break;
        case 38: // Up.
            $img.animate({top: '-=10px'}, 100);
            break;
        case 39: // Right.
            $img.animate({left: '+=10px'}, 100);
            break;
        case 40: // Down.
            $img.animate({top: '+=10px'}, 100);
            break;
        default:
            break;
    }
});

您可能有jQuery冲突问题，请尝试更改以下内容

这：

对此

var $img = jQuery("img");
jQuery(document).keydown(function (key) {

源必须是有效的图像路径，您正在使用指向网页的url，但我的IMG是相对的。。。。。我不确定您指的是什么语法错误。@ChrisJones例如，这是无效的：switchparseIntkey.which，10{真的不是吗？所以里面的全部代码都是假的？我以为我复制了IMG数学…哎呀。是的。我以为它应该像其他像素编辑器那样自己编辑它…哎呀…我把你的代码放进去，然后修复了图像，使它现在指向图像的更好版本。它仍然没有移动。@ChrisJones我刚刚将代码更新为一个更好的版本。看看它是否适合你。这里有一个例子：还要确保图像有位置：绝对；我觉得所有这些更改现在都应该在那里。但我看不出它在工作。你所需要做的就是把焦点放在窗口上…只需点击它，它就工作了…除了我的以外，我的所有东西都可以使用它。这让我很高兴呃，如果图像类型有问题或其他问题..看起来您正试图从硬盘运行“网站”。请尝试设置它

var $img = $("img");
$(document).keydown(function (key) {

var $img = jQuery("img");
jQuery(document).keydown(function (key) {