html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/demo1.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo1.js"></script>
</head>
<body>
<div id="dbird"><img src="img/bird.gif"></div>
</body>
</html>
css:
*{
padding:0px;
margin:0px;
}
#dbird{
width:206px;
height:121px;
position:absolute;
}
body {
overflow:hidden;
}
.driection-37{
transform:rotateY(180deg);
}
.driection-38{
transform:rotate(-60deg);
}
.driection-40{
transform:rotate(60deg);
}
js:
/// <reference path="jquery-1.10.2.min.js" />
var step = 10;//步值
var rcode = 39;
$(function () {
var off = $("#dbird").offset();//获取小鸟当前的方位
var dwidth = $(window).width();//获取浏览的宽度和高度
var dheight = $(window).height();
var bwidth = $("#dbird").width();//获取小鸟的宽度和高度
var bheight = $("#dbird").height();
$(document).keydown(function (e) {
var keycode = e.keyCode;
if (keycode != rcode) {
$("#dbird").removeClass().addClass("driection-" + keycode);
}
rcode = keycode;
//alert(keycode);
switch (keycode) {
case 37://左边
off.left -= step;
if (off.left <= -bwidth) {
off.left = dwidth;
}
break;
case 38://上
off.top -= step;
if (off.top <= -bheight) {
off.top = dheight;
}
break;
case 39://右
off.left += step;
if (off.left >= dwidth) {
off.left = -bwidth;
}
break;
case 40://下
off.top += step;
if (off.top >= dheight) {
off.top = -bheight;
}
break;
}
$("#dbird").offset(off);
});
});