Question

所以基本上我试图这样做，当我点击一个或A它会将我的图像移动到另一个位置。我纯粹用互联网上发现的代码剪辑编码，我可能做错了。

function move1() {
    document.getElementById("character").style.right=450px;
}

var KeypressFunctions = [];
KeypressFunctions['A'.charCodeAt(0)] = move1
KeypressFunctions['a'.charCodeAt(0)] = move1

h1 {
    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>

Answer 1

在$('#example').dataTable( { "initComplete": function() { alert( 'DataTables has finished its initialisation.' ); $('#checkAll').click(function(){ console.log('working...'); }); } });中尝试这个简单的click事件函数。我会将图像从左向右移动。

＆＃13;

jquery

＆＃13;

$('.clickme').click(function(){
	$('.movingimg').css('margin-left','450px');
});

＆＃13;

img{ display: block; }

＆＃13;

Answer 2

标准CSS为您启用动画。触发它的最佳方法是使用classList在车上和车外切换带有运动规则的CSS类。

＆＃13;

var button = document.getElementsByTagName("button")[0];
var car = document.getElementsByTagName("img")[0];

button.addEventListener("click", function() {
  car.classList.toggle("activate");
});

＆＃13;

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);
}

＆＃13;

<button>A</button>
<div><img src="https://intrest.run/media/car.svg"></div>

＆＃13;

我无法通过点击“a”来移动我的图像

2 个答案: