如何使用JS中的onclick（）函数放置图像

Question

所以我想我知道该怎么做。 调用onclick()函数时，我需要获取光标的坐标。 问题是，我不确定单击时如何创建新图像。 很抱歉没有显示我的尝试。 它们存在，但基本上什么也没做。 有谁知道如何做到这一点？ 谢谢。

编辑：请注意，图像不能在那里开始。 它们必须在单击时创建。

Answer 1

使用CSS设置默认值以隐藏image属性，并使用click函数更改CSS以显示而不是隐藏。

Answer 2

<body style="position: relative">

<script>
var img = null;

function placeImage(e) {

if(img == null){
    img = document.createElement("IMG");
    img.setAttribute("src", "img.png");
    img.setAttribute("width", "40");
    img.setAttribute("height", "40");
    img.style.position = "absolute";
    document.body.appendChild(img);
  }
  img.style.left = (e.clientX - (img.width / 2)) + "px";
  img.style.top = (e.clientY - (img.height / 2)) + "px";
}

document.addEventListener("click", placeImage);
</script>
</body>

这会将图像的中心放置在您单击的位置。

编辑：我更改了代码以将图像创建为DOM对象

Answer 3

基于@AyoubLaazazi的答案，请尝试以下操作：

 img = document.getElementById("img") counter = 0 function placeImage(e) { imgc = $("#img").clone().appendTo("body")[0] imgc.style.visibility = "visible" imgc.style.left = (e.clientX - (img.width / 2)) + "px"; imgc.style.top = (e.clientY - (img.height / 2)) + "px"; counter++ } document.addEventListener("click", placeImage)

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <img src="https://d21ii91i3y6o6h.cloudfront.net/gallery_images/from_proof/8007/large/1441565237/stack-overflow-logo.png" style="visibility: hidden; position: absolute" id="img"/> </body>

如何使用JS中的onclick（）函数放置图像

问题描述

3 个解决方案

解决方案1
0 2018-06-30 19:38:54

解决方案2
0 2018-06-30 19:55:52

解决方案3
0 已采纳 2018-06-30 20:10:02

如何使用JS中的onclick（）函数放置图像

问题描述

3 个解决方案

解决方案1 0 2018-06-30 19:38:54

解决方案2 0 2018-06-30 19:55:52

解决方案3 0 已采纳 2018-06-30 20:10:02

解决方案1
0 2018-06-30 19:38:54

解决方案2
0 2018-06-30 19:55:52

解决方案3
0 已采纳 2018-06-30 20:10:02