Javascript 基于鼠标单击坐标显示图像位置
我从一个空白页面开始，用户应该单击页面上的任意位置以弹出图像。我试图在用户在页面中单击的精确坐标处显示图像。 无论用户何时何地点击，我都能在角落里弹出一幅图像。我还能够收集鼠标在页面中单击的位置的x和y坐标，但是在将这些坐标作为图像的坐标时，我遇到了麻烦。使用下面的代码，当用户单击窗口中的任意位置时，雪球的图像将显示在左上角，并显示单击的x坐标。（单击“更多”会更改每次单击时显示的x坐标）。我的问题是，如何使雪球出现在单击坐标处Javascript 基于鼠标单击坐标显示图像位置,javascript,html,css,Javascript,Html,Css,我从一个空白页面开始，用户应该单击页面上的任意位置以弹出图像。我试图在用户在页面中单击的精确坐标处显示图像。 无论用户何时何地点击，我都能在角落里弹出一幅图像。我还能够收集鼠标在页面中单击的位置的x和y坐标，但是在将这些坐标作为图像的坐标时，我遇到了麻烦。使用下面的代码，当用户单击窗口中的任意位置时，雪球的图像将显示在左上角，并显示单击的x坐标。（单击“更多”会更改每次单击时显示的x坐标）。我的问题是，如何使雪球出现在单击坐标处 <head> <script> d
<head>
<script>
document.onclick = userClicked;
function userClicked() {
var x = event.clientX;
var y = event.clientY;
document.getElementById("xCoord").innerHTML=x;
document.getElementById("snowballAppear").style.display = '';
}
</script>
<div class "container">
<div class "picture">
<img alt="snowballAppear" id="snowballAppear" style="display: none" src="http://vignette3.wikia.nocookie.net/pottermore/images/9/99/Snowball-lrg.png/revision/latest?cb=20130412122815"/>
</div>
</div>
</head>
document.onclick=userClicked；
函数userClicked（）{
var x=event.clientX；
var y=event.clientY；
document.getElementById（“xCoord”）.innerHTML=x；
document.getElementById（“SnowBallapper”）.style.display=''；
}
您可以使用CSS元素“left”表示X，使用“top”表示Y。请确保在图像中使用“position:absolute；”CSS样式 基本上，在代码中：
function userClicked() {
var x = event.clientX;
var y = event.clientY;
var snowball = document.getElementById("snowballAppear");
snowball.style.display = '';
snowball.style.position = 'absolute';
snowball.style.left = x + 'px';
snowball.style.top = y + 'px';
}
编辑：添加一些评论回来；您可能希望在userClicked函数中添加“event”作为可通过的参数。单击事件将该“事件”变量转发到函数中。这将使它在许多主流浏览器中都能正常工作（在V8中也能正常工作）。检查这把小提琴，它应该在大多数主要的浏览器工作 您需要定位img元素： 别忘了将事件传递给你的职能部门
function userClicked(event) {
var x = event.clientX;
var y = event.clientY;
document.getElementById("xCoord").innerHTML=x;
document.getElementById("snowballAppear").style.display = '';
// fixed position - The element is positioned relative to the browser window
document.getElementById("snowballAppear").style.position = "fixed";
// px from top of browser
document.getElementById("snowballAppear").style.top = y + "px";
// px from left of browser
document.getElementById("snowballAppear").style.left = x + "px";
}
这可能是他的下一个问题：）我很确定我们都知道为什么。所以你们能给我解释一下吗？这个事件不会被知道。如果chrome的JS引擎有任何意义的话，它甚至不会在那里工作。来自鼠标点击的事件应该被转发到userClicked函数中，并且从那里可以使用“event”变量。其次，它在旧的IE版本中不起作用。所以你是说我应该这样写我的函数：
functionuserclicked（event）{查看源代码