Question

我从一个空白页开始，用户应该点击页面上的任意位置以弹出一个图像。我正在尝试在用户在页面中单击的位置的精确坐标处显示图像。无论何时/何地用户点击，我都可以在角落弹出一个图像。我也能够收集鼠标在页面中单击的位置的x和y坐标，但是在使这些坐标成为图像的坐标时，我遇到了麻烦。使用下面的代码，当用户点击窗口内的任何位置时，雪球的图像出现在左上角，并显示点击的x坐标。（单击更多可更改每次单击时显示的x坐标）。我的问题是，如何让雪球出现在点击坐标上？

<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>

Answer 1

你可以使用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';
}

JSFiddle：https://jsfiddle.net/mxq629ng/

您可能希望从X和Y中减去图像高度/宽度的一半，使其围绕鼠标居中。

编辑：补充一些评论回来了;您可能希望将“event”添加为userClicked函数中的可传递参数。 click事件会将“event”变量转发到您的函数中。这将使它在许多主流浏览器中工作（不知何故，它在V8中工作）。检查这个小提琴，它应该适用于大多数主流浏览器; https://jsfiddle.net/mxq629ng/1/

Answer 2

您需要定位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";
}

根据鼠标点击坐标

2 个答案: