JS制作小车上下左右移动

最新推荐文章于 2023-03-13 14:56:52 发布

Curry 3O

最新推荐文章于 2023-03-13 14:56:52 发布

阅读量1.6k

点赞数 3

分类专栏： JS

本文链接：https://blog.csdn.net/qq_42552393/article/details/96893373

版权

假设一个在html页面元素，你可以通过按键盘上下左右键来控制它的位置并且能改变它的方向，下面我们用’小车’来实现。

方法一

这个方法需要用四张不同的小车图片，当我们按下键盘上下左右键后通过if判断键值来改变小车的移动方向并且更换对应的图片，最终达到小车开动的效果。

图片：

在这里插入图片描述

详细代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>car</title>
	<style>
		*{
    
			margin:0;
		}
		body{
    
			background-color: coral;
		}
		div{
    
			background-image: url(./right.png);
			width: 200px;
			height: 100px;
			background-size: 100% 100%;
		}
	</style>
	<script>
		window.onload = function(){
    
			var div = document.getElementsByTagName('div')[0];
			document.onkeyup = function(event){
    
				// 37左 38上 39右 40下
				var left = parseFloat(div.style

最低0.47元/天解锁文章

Curry 3O

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
JS制作小车上下左右移动

假设一个在html页面元素，你可以通过按键盘上下左右键来控制它的位置并且能改变它的方向，下面我们用’小车’来实现。方法一这个方法需要用四张不同的小车图片，当我们按下键盘上下左右键后通过if判断键值来改变小车的移动方向并且更换对应的图片，最终达到小车开动的效果。图片：详细代码:<!DOCTYPE html><html lang="en"><head...
复制链接

扫一扫