图片根据上下左右键移动并且转向

最新推荐文章于 2021-01-17 14:13:13 发布

monkey4396

最新推荐文章于 2021-01-17 14:13:13 发布

阅读量625

点赞数

本文链接：https://blog.csdn.net/qq_37059773/article/details/96874516

版权

闲来无事在网上学习了一下键盘的上下左右事件，于是做了一个图片的上下左右移动并随移动方向转向的代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script type="text/javascript">
    document.onkeydown = function(e){
    var obj = document.getElementById("id");
    var x = obj.offsetLeft;
    var y = obj.offsetTop;
    switch ((e||event).keyCode) {
        case 37: x -= 10 ;obj.style.transform = 'rotate('+270+'deg)'; break;
        //向左移动并转向 
        case 38: y -= 10;obj.style.transform = 'rotate('+0+'deg)'; break;
        //向上移动并转向 
        case 39: x += 10;obj.style.transform = 'rotate('+90+'deg)'; break;
        //向右移动并转向
        case 40: y += 10; obj.style.transform = 'rotate('+180+'deg)';break;
        //向下移动并转向 
    }
    obj.style.left = x+"px";
    obj.style.top = y+"px";
};
 
</script>
</head>
<body>
	<img src="自己的图片" id="id" width="100" height="200" style="position: absolute; left: 50px;top: 50px; "  />

</body>
</html>

monkey4396

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片根据上下左右键移动并且转向

闲来无事在网上学习了一下键盘的上下左右事件，于是做了一个图片的上下左右移动并随移动方向转向的代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><script type="text/j...
复制链接

扫一扫