如何使用JQuery keyDown移動圖片？

你好我是網絡編程的初學者。我在「CodeAcademy.com」學習。我正在製作一個小頁面來練習我已經學過的東西，但是我的代碼出了問題。 Here is the Page 如何使用JQuery keyDown移動圖片？

我想讓按下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;  
     } 
    });

}）;

有什麼錯呢？

來源

2013-07-01 Vato

CodeAdademy都有自己的論壇，關於他們的教程問題。你可以去[這裏]（http://www.codecademy.com/forums/web-beginner-en-jtFIC）要問您的jQuery相關CodeAcademy問題 –

@Zeaklous說這話的人是一個教程？該OP說'我正在製作一個小頁面來練習我已經學過的東西' – Ian

@Ian論壇也是這樣的。我不是說他不應該在那裏張貼，只是讓他知道他們有自己的（我自己經常看他們） –

OH終於找到了答案，我在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; 
}

感謝大家的幫助:)

來源

2013-07-02 07:18:33 Vato

是的，你必須在'element'設置'position'財產，如果你想改變'top'，'right'，'bottom'或'left'值。 –

我不是100％肯定，如果這是你的問題，但這不是正確的選擇：

$('move')

應該.move，或#move。

來源

2013-07-01 15:19:53

改變了這一切，但它仍然無法正常工作:(也許它不工作，因爲圖片是在菜單選項卡中的一個......我不知道，我沒有那麼多的知識。 – Vato

JSFiddle Demo

您需要的功能綁定到文檔body標籤。

因此，你需要用

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

，以取代目前的代碼，改變你的case聲明：

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

}） ;

來源

2013-07-01 15:22:05

你可以用數字開始ID和類，我不知道你從 – Ian

得到的那個@Ian好吧，在HTML5中技術上有效，但如果你真的想用'＃2'等等。 –

我以爲你的意思是說它在任何方面都是有效的，當你沒有詳細說明的時候。但這很有趣，我不確定我是否知道這一點。然後再次，我從來沒有遇到過這種情況，因爲我沒有用數字來啓動我的'id's''類。我覺得很奇怪，他們不匹配 - 你可以在HTML5中做到這一點，但不是CSS – Ian

如何使用JQuery keyDown移動圖片？

回答

相關問題