Question

我有以下代码来跟踪用户点击图片的位置：

 <img src="images/test.jpg" id="testimg" />

    <script type="text/javascript">
        $("#testimg").click(function (ev) {
            mouseX = ev.pageX;
            mouseY = ev.pageY
            alert(mouseX + ' ' + mouseY);
        })

    </script>

我想要做的是，当用户点击图片时，我想在点击的X，Y坐标处画一个点。

有人可以就如何做到这一点给我一些建议吗？

Answer 1

<script type="text/javascript">
        $("#testimg").click(function (ev) {
        mouseX = ev.pageX;
        mouseY = ev.pageY
        //alert(mouseX + ' ' + mouseY);
        var color = '#000000';
        var size = '1px';
        $("body").append(
            $('<div></div>')
                .css('position', 'absolute')
                .css('top', mouseY + 'px')
                .css('left', mouseX + 'px')
                .css('width', size)
                .css('height', size)
                .css('background-color', color)
        );
    })
</script>

这将绘制一个黑色的1x1像素div。

Answer 2

方法1。

您必须使用canvas标记。 https://developer.mozilla.org/en/Canvas_tutorial

方法2。

<div style="width:1px; height : 1px; position: fixed; top: mouseY; left:mouseX></div>

仅在页面不可滚动时才适用

使用jQuery在图像上绘制点

2 个答案: