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>