gil*_*t-v 4 javascript jquery jquery-animate
我是jQuery的新手,并且已经通过Codecademy学习它.我正在网站上创建一个'codebit'(网站),我试图在按下向上,向下,向左和向右键时使图像精灵做出反应(移动).
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Sprite</title>
<link rel='stylesheet' type='text/css' href='style.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<img src="[img]"/>
</body>
</html>
CSS:
img {
position: relative;
left: 0;
top: 0;
}
使用Javascript:
$(document).ready(function() {
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
//LEFT
case 37:
$('img').animate({left: "-=10px"}, 500);
break;
//RIGHT
case 39:
$('img').animate({left: "+=10px"}, 500);
break;
//UP
case 38:
$('img').animate({top: "-=10px"}, 500);
break;
//DOWN
case 40:
$('img').animate({top: "+=10px"}, 500);
break;
}
});
});
我已经检查了一些网站上的语法错误,似乎找不到任何明显的错误.帮助将非常感激.
您应该在头脑中包含jQuery脚本(在您自己的script.js之前).
喜欢
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>