我不能通過點擊「a」來移動我的圖像

所以基本上我試圖做到這一點，所以當我點擊一個或一個它會將我的圖像移動到不同的位置。我純粹從代碼片斷中編寫代碼，我在互聯網上找到了代碼，我可能做了一些非常錯誤的事情。我不能通過點擊「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>

來源

2017-09-07 nick

你有沒有嘗試設置使用權 –

我還沒有試過尚未阿希什，到底我怎麼做這個的保證金insted的？ – nick

只需使用'''document.getElementById（「character」）。style.marginRight = 450px;''' –

嘗試在jquery這個簡單的click事件功能。我將從左到右移動圖像。

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

img{ display: block; }

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
 

 
    <a href="#" class="clickme">Click me!</a> 
 
<img class="movingimg" src="https://s26.postimg.org/ma8qknfw5/image.png" alt="">

來源

2017-09-07 04:13:58 bellabelle

標準CSS使動畫爲您服務。觸發它的最好方法是使用classList來切換車輛上下車的運動規則。

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>

來源

2017-09-07 04:45:05

我不能通過點擊「a」來移動我的圖像

回答

相關問題