javascript - 如何使用 JQuery keyDown 移动图片?

标签 javascript jquery html css

您好,我是网络编程的初学者。我在“CodeAcademy.com”学习。我正在做一个小页面来练习我已经学到的东西,但是我的代码有问题。 Here is the Page

我想让 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>

还有我的 JS。

$(document).ready(function() 
{
    $('#menu').accordion();
    $('#2').draggable();
    $('#move').keydown(function(key)
    { 
    switch(parseInt(key.which,10)) 
       {
            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;      
       }
   });    

});

这是怎么回事?

最佳答案

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

$('移动')

应该是.move,或者#move。

关于javascript - 如何使用 JQuery keyDown 移动图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17407968/

相关文章:

css - 最大宽度 : 100% not working on images with srcset

javascript - 使用 Jquery 将 Javascript 加载到 Div 中

Javascript OnScroll 性能比较

javascript - CK编辑器4 : Use links to anchors to navigate inside the editor

jQuery 使用事件处理程序删除元素

javascript - 如何延迟动画

javascript - AngularJS 自定义过滤器在选择下拉菜单上触发

jquery - 如何隐藏qtip

c# - 为什么不在我的网站正文中显示背景图片?

javascript - 为什么我的 FriendBuy 小部件没有嵌入?