javascript中2点之间的过渡图片

Question

I'm trying to do an image transition in javascript between 2 points. First coordonates are the image initial x and y and second are the x and y of the "click" event. How can I simulate a transition in Javascript?

Answer 1

Your code will just move the image from one position to another in a jiffy (not like a smooth animation).

If this is what you are doing, then just make position of your img relative .

<img id="player" src = "images/volley.png" style="postion:relative"></img>

Answer 2

You can use CSS3 transitions your JavaScript seems correct:

transition: all 1s ease;

You can change ease to linear depending on the effect you want. You can also adjust 1s for how long it takes to move. You also need position: relative so left and top can actually do something

 var x_click; var y_click; var player = document.getElementById("player"); document.addEventListener("click", move_player) function move_player(e) { x_click = e.clientX; y_click = e.clientY; player.style.left = x_click - player.clientWidth / 2 + "px"; player.style.top = y_click - player.clientHeight / 2 + "px"; } 

 .animateable { position: relative; transition: all 1s ease; } 

 <!--Some image I found--> <img id="player" class="animateable" src="https://jardinsoli.files.wordpress.com/2011/10/person.png" />