JQuery鍵盤控制圖片
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--使用JQuery鍵盤事件來實現漂浮的魚效果。
途中的魚是一張較小的圖片，用鍵盤的上、下、左、右鍵來控制它在大圖上移動。-->
<!--
實現思路:
1.將一個圖片作爲一個div的背景圖片.另一個可以移動的圖可以放在div中
2.給小圖一個keydown事件
3.用css的padding-top和padding-left屬性,進行圖片的上下偏移.
注意事項:
1.注意大圖的尺寸
2.小圖一開始出現在div的左上角,所以需要一個過渡的變量.
-->
<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
var x=1;//針對初始x軸位置的x值過渡變量
var y=1;//針對初始y軸位置的y值過渡變量
$(document).keydown(function (e) {
switch(e.keyCode){
case 38://針對鍵盤中的位置鍵位是:上
if(x>0){
x--;
$("#dd").css("padding-top",(x*10)+"px");//上下來回動是針對界面的上方位置來說的
}
break;
case 40://下
if(x < 52) {
x++;
$("#dd").css("padding-top", (x * 10) + "px");
}
break;
case 37: //左
if(y > 0) {
y--;
$("#dd").css("padding-left", (y * 10) + "px");//左右來回動是針對界面的左方位置來說的
}
break;
case 39://右
if(y < 90) {
y++;
$("#dd").css("padding-left", (y * 10) + "px");
}
break;
}
})
</script>
<body>
<div id="bd" style="width: 1024px;height: 650px;background-image: url(img/sea.jpg);">
<img id="dd" src="img/fish.gif"/>
</div>
</body>
</html>
