请选择 进入手机版 | 继续访问电脑版
点击联系客服
客服QQ:509006671 客服微信:mengfeiseo
查看: 5|回复: 0

实现JS简易水箱的移动和整改

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-6-11 07:07:35 | 显示全部楼层 |阅读模式
想法:

1.首先,从页面获取水箱的初始位置,然后记录初始位置

2.将键盘事件绑定到水箱上,这样就可以按(上、下、左、右按钮)改变方向和移动

切换是更改图片的src地址。

4.移动是改变图片的style.left和style.top的值

代码如下:

!DOCTYPE  html

Html  lang='en  '

头(电影)

meta  charset=' utf-8 '

元名称=' viewport  ' content=' width=device-width,initial-scale=1.0 '

meta  http-equiv=' x-ua-compatible  ' content=' ie=edge  '

TitleDocument/title

风格(音乐)

Body  {

Background: # 000

}

Img  {

Position: fixed:

Left: 500px:

top  3360 400 px;

}

/style

/head

菩提

Img  src='imgs/tankU.gif' alt=' '

脚本(脚本)

//获取图片

va  roimg=document  . query  selector(' img  ')

//获取图片的属性

Var  style=getComputedStyle(Oimg)

//记录图片的初始位置

Var  L=parseInt(style.left)

Var  T=parseInt(style.top)

//键盘按下事件绑定

Window.onkeydown=function(e) {

console  . log(e  . key);

//判断箭头键

开关(e.key) {

//按向上箭头键

Case  'ArrowUp':

//更改图片的src地址,控制方向切换

Oimg.src='imgs/tankU.gif  '

//目标位置=初始位置-每次移动的距离(此处设置为10px)

T=T-10

//变更图形的顶部距离并控制移动

Oimg.style.top=T  'px  '

布雷克;

Case  ' ArrowDown  ' :

Oimg.src='imgs/tankD.gif  '

T=T  10

Oimg.style.top=T  'px  '

布雷克;

Case  'ArrowLeft':

Oimg.src='imgs/tankL.gif  '

L=L-10

Oimg.style.left=L  'px  '

布雷克;

Case  'ArrowRight':

Oimg.src='imgs/tankR.gif  '

L=L  10

Oimg.style.left=L  'px  '

布雷克;

}

}

/脚本

/body

/html

坦克照片:











回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|无图版|手机版|小黑屋|汕头@IT精英团

Powered by Discuz! X3.4 © 2021 Comsenz Inc.

GMT+8, 2021-6-25 14:38 , Processed in 1.175671 second(s), 40 queries .

快速回复 返回顶部 返回列表