I'm getting slowly back to javascript and I'm a bit lost on basics. I just want to move an image to follow the mouse position. Here is a simple code I've been tweaking for some time without any success :
我慢慢回到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>
It looks a lot like some tutorials to do this very thing. What I don't understand is that using the alerts (I don't know how to print in the browser's javascript console) I see that avatar.x and y are never changed. Is it related to the way I've declared the image?
它看起来很像一些教程来做这件事。我不明白的是使用警报(我不知道如何在浏览器的javascript控制台中打印)我看到avatar.x和y永远不会改变。它与我宣布图像的方式有关吗?
Can someone point me what I'm doing wrong?
有人能指出我做错了什么吗?
4 个解决方案
#1
4
I think that you don't want to set x and y, but rather style.left and style.top!
我认为你不想设置x和y,而是设置style.left和style.top!
avatar.style.left = e.x;
avatar.style.top = e.y;
#2
2
There is no x and y property for avatar - you should use 'top' and 'left' instead. Also, move the var avatar = document.getElementById("avatar"); declaration outside of the function, as you only need to do this once.
头像没有x和y属性 - 你应该使用'top'和'left'代替。另外,移动var avatar = document.getElementById(“avatar”);函数外的声明,因为你只需要做一次。
#3
2
<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>
#4
1
avatar.style.top = e.clientY + 'px';
avatar.style.left = e.clientX + 'px';
#1
4
I think that you don't want to set x and y, but rather style.left and style.top!
我认为你不想设置x和y,而是设置style.left和style.top!
avatar.style.left = e.x;
avatar.style.top = e.y;
#2
2
There is no x and y property for avatar - you should use 'top' and 'left' instead. Also, move the var avatar = document.getElementById("avatar"); declaration outside of the function, as you only need to do this once.
头像没有x和y属性 - 你应该使用'top'和'left'代替。另外,移动var avatar = document.getElementById(“avatar”);函数外的声明,因为你只需要做一次。
#3
2
<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>
#4
1
avatar.style.top = e.clientY + 'px';
avatar.style.left = e.clientX + 'px';