所以基本上我正在尝试做到这一点，所以当我单击 a 或 A 时，它会将我的图像移动到不同的位置。我纯粹是根据我在互联网上找到的代码片段编写代码的，我可能做错了一些事情。
function move1() {
document.getElementById("character").style.right=450px;
}
var KeypressFunctions = [];
KeypressFunctions['A'.charCodeAt(0)] = move1
KeypressFunctions['a'.charCodeAt(0)] = move1h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
#character {
width:45px;
height:45px;
position:fixed;
bottom:100px;
right:800px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<img src="C:/Users/Nick Malone/Desktop/Downloads/block.jpg" id="character">
</body>
</html>最佳答案
标准 CSS 可为您启用动画。触发它的最佳方法是使用 classList 来切换 CSS 类和汽车上下运动规则。
var button = document.getElementsByTagName("button")[0];
var car = document.getElementsByTagName("img")[0];
button.addEventListener("click", function() {
car.classList.toggle("activate");
});button {
min-width: 48px;
}
img {
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
.activate {
transform: translate(3em, 0);
-webkit-transform: translate(3em, 0);
-moz-transform: translate(3em, 0);
-o-transform: translate(3em, 0);
-ms-transform: translate(3em, 0);
}<button>A</button>
<div><img src="https://intrest.run/media/car.svg"></div>关于javascript - 我无法通过单击 "a"获得移动图像的功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46087515/