使用Javascript移动图像
我可以让图像旋转但不移动，我想我离得很近，但还没有弄清楚 CSS、body和window.onload函数都已给定，因此我无法更改它们。任务是创建图像，然后根据按下的键移动图像 有人能告诉我我做错了什么吗使用Javascript移动图像,javascript,Javascript,我可以让图像旋转但不移动，我想我离得很近，但还没有弄清楚 CSS、body和window.onload函数都已给定，因此我无法更改它们。任务是创建图像，然后根据按下的键移动图像 有人能告诉我我做错了什么吗 <!doctype html> <html> <head> <title> setTimeout </title> <meta charset="utf-8"> <style> html,
<!doctype html>
<html>
<head>
<title> setTimeout </title>
<meta charset="utf-8">
<style>
html, body {
margin: 0px;
padding: 0px;
}
div#container {
margin-left: auto;
margin-right: auto;
width: 30%;
}
div.bug {
position: absolute;
width: 100px;
height: 76px;
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
}
.up {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.down {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.right {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.left {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
</style>
<script>
// your code here
function Bug () {
//Assign local variables to be used within the function, call
//function to assign bug an id
var bugDiv = document.getElementById("container");
var bugId = getId();
//call functions to display instructions and bug
displayBug();
//public method to move bug only when certain keys are pressed. This
//function will move the showBug div created by the display
//function.
this.moveBug = function (e) {
if (window.event) {
number = window.event.keyCode;
if (number == 106) {
moveDown();
}
if (number == 107) {
moveUp();
}
if (number == 104) {
moveLeft();
}
if (number == 108) {
moveRight();
}
}
}
function moveDown (){
console.log("down");
showBug.setAttribute("class", "down")
showBug.style.top = parseInt(showBug.style.top) + 5 + 'px';
}
function moveUp () {
console.log("up");
showBug.setAttribute("class", "up");
showBug.style.top = parseInt(showBug.style.top) - 5 + 'px';
}
function moveLeft() {
console.log("left");
showBug.setAttribute("class", "left");
showBug.style.left = parseInt(showBug.style.left) - 5 + 'px';
}
function moveRight() {
console.log("right");
showBug.setAttribute("class", "right");
showBug.style.left = parseInt(showBug.style.left) + 5 + 'px';
}
//private function to display bug in the orginal container div on the
//page
function displayBug() {
showBug = document.createElement("img");
showBug.setAttribute("id", bugId);
showBug.setAttribute("class", "bug");
showBug.src = "/AdvJS/ladybug.png";
showBug.style.marginTop = "200px"
showBug.style.marginLeft = "100px"
bugDiv.appendChild(showBug);
}
//private function to assign bug an id
function getId() {
var bugs = document.querySelectorAll(".bug");
if (bugs) {
return bugs.length;
}
return 0;
}
}
window.onload = function() {
var bug = new Bug("container");
// j = 106 (down), k = 107 (up), h = 104 (left) , l = 108 (right)
document.onkeypress = function(e) {
bug.moveBug((typeof e.which == "number") ? e.which : e.keyCode);
}
};
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
设置超时
html，正文{
边际：0px；
填充：0px；
}
分区#集装箱{
左边距：自动；
右边距：自动；
宽度：30%；
}
小虫子{
位置：绝对位置；
宽度：100px；
高度：76px；
-webkit转换：-webkit转换2；
-moz变换：moz变换2s；
-o-转变：-o-转变2s；
转变：转变2s；
}
.起来{
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
变换：旋转（90度）；
}
.下来{
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-o变换：旋转（-90度）；
变换：旋转（-90度）；
}
.对{
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
.左{
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
}
//你的代码在这里
函数错误（）{
//分配要在函数中使用的局部变量，调用
//函数为bug分配一个id
var bugDiv=document.getElementById（“容器”）；
var bugId=getId（）；
//调用函数以显示指令和错误
displayBug（）；
//只有在按下某些键时才移动bug的公共方法
//函数将移动显示器创建的showBug div
//功能。
this.moveBug=函数（e）{
if（window.event）{
编号=window.event.keyCode；
如果（数字=106）{
向下移动（）；
}
如果（数字==107）{
moveUp（）；
}
如果（数字=104）{
左移（）；
}
如果（数字==108）{
moveRight（）；
}
}
}
函数向下移动（）{
控制台。登录（“关闭”）；
setAttribute（“类”，“向下”）
showBug.style.top=parseInt（showBug.style.top）+5+'px'；
}
函数向上移动（）{
控制台。登录（“up”）；
setAttribute（“class”，“up”）；
showBug.style.top=parseInt（showBug.style.top）-5+'px'；
}
函数moveLeft（）{
控制台日志（“左”）；
setAttribute（“类”、“左”）；
showBug.style.left=parseInt（showBug.style.left）-5+'px'；
}
函数moveRight（）{
控制台日志（“右”）；
setAttribute（“类”、“右”）；
showBug.style.left=parseInt（showBug.style.left）+5+'px'；
}
//私有函数，用于在服务器上的原始容器div中显示错误
//页面
函数displayBug（）{
showBug=document.createElement（“img”）；
setAttribute（“id”，bugId）；
setAttribute（“类”、“bug”）；
showBug.src=“/AdvJS/ladybug.png”；
showBug.style.marginTop=“200px”
showBug.style.marginLeft=“100px”
bugDiv.appendChild（showBug）；
}
//分配bug id的私有函数
函数getId（）{
var-bugs=document.querySelectorAll（“.bug”）；
如果（错误）{
返回长度；
}
返回0；
}
}
window.onload=函数（）{
var bug=新bug（“容器”）；
//j=106（向下），k=107（向上），h=104（左），l=108（右）
document.onkeypress=功能（e）{
bug.moveBug（（e.which==“number”）？e.which:e.keyCode）；
}
};
位置：相对的，第二次使用marginTop
，marginLeft
代替顶部的和左侧的，等等
向上移动对象：showBug.style.marginTop=parseInt（showBug.style.marginTop）-10+'px'
，左边的方法相同
工作示例：请检查此项。你的js有问题
- 创建元素时，必须设置
top
和left
- 设置showBug时，setAttribute（“class”，“down”）class
bug
被删除。因此，相应的样式在此之后将不适用
$（函数（）{
函数错误（）{
//分配要在函数中使用的局部变量，调用
//函数为bug分配一个id
var bugDiv=document.getElementById（“容器”）；
var bugId=getId（）；
//调用函数以显示指令和错误
displayBug（）；
//只有在按下某些键时才移动bug的公共方法
//函数将移动显示器创建的showBug div
//功能。
this.moveBug=函数（e）{
console.log（window.event.keyCode）；
if（window.event）{
编号=window.event.keyCode；
如果（数字=106）{
向下移动（）；
}
如果（数字==107）{
moveUp（）；
}
如果（数字=104）{
左移（）；
}
如果（数字==108）{
moveRight（）；
}
}
}
函数向下移动（）{
控制台。登录（“关闭”）；
setAttribute（“类”，“bug关闭”）
showBug.style.top=parseInt（showBug.style.top）+5+'px'；
console.log（'top'+showBug）；
}
函数向上移动（）{
控制台。登录（“up”）；
setAttribute（“类”，“bug up”）；
showBug.style.top=parseInt（showBug.style.top）-5+'px'；
}
函数moveLeft（）{
控制台日志（“左”）；
setAttribute（“class”，“bug left”）；
showBug.style.left=parseInt（showBug.style.left）-5+'px'；
}
函数moveRight（）{
控制台日志（“右”）；
setAttribute（“类”、“错误权限”）；
showBug.style.left=parseInt（showBug.style.left）+5+
showBug.style.position = "absolute";
showBug.style.left = "10px";
showBug.style.right = "10px";
showBug.style.top = "10px";
showBug.style.bottom = "auto";