Javascript 通过JQuery将img的位置动态更改为鼠标位置

我试图通过jquery将

img

的位置动态更改为每次单击时的鼠标位置。问题是它不起作用。我的意思是它根本不动。下面是我的jquery代码：

$(document).ready(function() {
    $(document).click(function(e) {
    $('#circle').css({position:'absolute', 'left':e.pageX, 'top':e.pageY});
    });
});

我们将不胜感激。我对这一点有点陌生，所以我需要你引导我了解一下你的答案。提前谢谢

以下是我的html和css代码：

#circle {
    max-width:25px;
    max-height:36px;
    width:auto;
    height:auto;
    -webkit-filter: drop-shadow(0px 0px 5px #ffffff);
}

HTML：（在我的身体标签内）

好的，现在开始工作了。。但我还有一个问题。每次点击图像都会复制自身。你认为这是为什么？如何解决呢？

您的

标记应该在

部分，而不是在页面正文的div中。您还需要确保它们实际上是使用控制台加载的

$(document).ready(function() {
    $(document).on('click',(function(e) {
         var radius = $('#circle').height() / 2;
         $('#circle').css({position:'absolute', 'left':e.pageX-radius, 'top':e.pageY-radius});
    });
});

---

。。。。如果希望圆的中心跟随鼠标单击。

每次单击时更新圆位置：

$(function() {
    $(document).on('click', function(e) {
        var radius = $('#circle').height() / 2;
        $('#circle').css({'left':e.pageX - radius, 'top':e.pageY - radius});
    });    
});

请参见实时示例：

---

复制的问题似乎来自

-webkit drop shadow

。这只是一个不好的呈现。

还可以查看HTML标记。谢谢。您是否有一位最接近的家长，拥有

position:relative

？对我来说效果很好，我打赌这是因为您的代码正在文档就绪状态下运行（当img不在页面上时）。您应该在img加载或重新运行后尝试运行它then@Zeaklous. 我再次单击了run，第二次使用这些标记时，它不起作用，但在注释中不起作用；）

$(function() {
    $(document).on('click', function(e) {
        var radius = $('#circle').height() / 2;
        $('#circle').css({'left':e.pageX - radius, 'top':e.pageY - radius});
    });    
});