Javascript 在点之间移动图像_Javascript_Css

Javascript 在点之间移动图像

javascript css

Javascript 在点之间移动图像,javascript,css,Javascript,Css,我想在单击事件时移动此图像。只使用javascript，它只显示在单击位置，而不进行转换 <body> <img id="player" src = "images/man.png"></img> <script> var x_click; var y_click; var player = document.getElementById("player"); document.addEventListen

我想在单击事件时移动此图像。只使用javascript，它只显示在单击位置，而不进行转换

<body>
    <img id="player" src = "images/man.png"></img>

<script>
    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";  
    }


</script>
</body>

但是，速度是一样的。如果我想将图像移动300px，需要0.5秒，如果我想将其移动1000px，也需要0.5秒。我正在寻找一种以一定速度移动它的方法：如果300px需要0.5秒，那么1000 px需要1.5-1.6秒。如何在Javascript中实现这一点？我没有使用任何库，如JQuery等。

尝试以下方法：

document.getElementById('your_id').style.animationDuration="1s";

对于跨浏览器：使用特定前缀尝试以下操作：

document.getElementById('your_id').style.webkitTransitionDuration="1s";

你能做一个小摆设让我们为你测试代码吗？是的。你可以使用javascript实现这一点。考虑到差异，你可以简单地操作transition的值。。您可以使用core JS.@Rayon Dabre实现这一点。您可以发布此类教程的链接吗？t设置player.style.transition或player.style.transition持续时间我认为在设置新位置之前，从A移动到B仍然需要相同的时间。无论距离有多近或多远。@Shury，必须有一些标准才能知道对象之间的距离。根据这一点，您需要更改持续时间..我使用了两点之间距离的公式：var dist=Math.sqrtparseIntx_click-parseIntplayer.style.left*parseIntx_click-parseIntplayer.style.left+parseInty_click-parseIntplayer.style.top*parseInty_click-parseIntplayer.style.top；警觉学家；player.style.animationDuration=parseIntdist/100+s；在点击事件中，我进入上面的移动函数，并尝试使用上面的值更改player.style.animationDuration，但它不起作用，CSS是否应该以某种方式修改？@shry，你需要调试一些东西..我想你就快到了..只需再调试一点和设置一些条件。。。

document.getElementById('your_id').style.webkitTransitionDuration="1s";