Question

我慢慢回到javascript，我在基础知识上有点迷失。我只想移动图像以跟随鼠标位置。这是一个简单的代码，我已经调整了一段时间没有任何成功：

<html>
<head>

</head>
<body>

<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>

<script lang="javascript">

function updateAvatarPosition( e )
{
    var avatar = document.getElementById("avatar");
    avatar.x = e.x;
    avatar.y = e.y;

    // alert( "e( " + e.x + ", " + e.y + " )" );    
    // alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}

document.onmousemove = updateAvatarPosition;


</script>

</html>

看起来很像一些教程来做这件事。我不明白的是使用警报（我不知道如何在浏览器的javascript控制台中打印）我看到avatar.x和y永远不会改变。它与我宣布图像的方式有关吗？

有人能指出我做错了什么吗？

Answer 1

我认为您不想设置x和y，而是设置style.left和style.top！

avatar.style.left = e.x;
avatar.style.top = e.y;

Answer 2

头像没有x和y属性 - 您应该使用'top'和'left'代替。另外，将var avatar = document.getElementById("avatar");声明移到函数之外，因为您只需要执行一次。

Answer 3

<html>
<head>

</head>
<body>

<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>

<script lang="javascript">

function updateAvatarPosition( e )
{
    var avatar = document.getElementById("avatar");
    avatar.style.left = e.x + "px";
    avatar.style.top = e.y + "px";

    //alert( "e( " + e.x + ", " + e.y + " )" );    
    //alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}

document.onmousemove = updateAvatarPosition;


</script>

</html>

Answer 4

avatar.style.top = e.clientY + 'px';
avatar.style.left = e.clientX + 'px';

如何在html / javascript中将图像移动到鼠标位置？

4 个答案: