Question

我想在点击事件上移动此图片。只有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>

我已经在CSS中进行了转换：

position:relative;
transition: left .5s linear, top .5s linear;

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

在点之间移动图像

0 个答案: