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

change position of img dynamically to mouse position via JQuery

本文关键字：位置 鼠标 动态 通过 img JQuery      更新时间：2023-09-26

每次单击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:（在我的身体标签内）

<img src="Images/circleIcon.png" id="circle">
<div id="JavaScript_JQuery">
    <script type="text/javascript" src="Javascript/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="Javascript/jquery-ui.js"></script>
    <script type="text/javascript" src="Javascript/jUI.js"></script>
</div>

好的，它现在工作了。。但我还有一个问题。每次点击都会复制图像。你认为为什么会发生这种事？如何解决？

每次点击时更新圆圈位置：

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

请参阅实际示例：JSFiddle

复制的问题似乎来自-webkit-drop-shadow。这只是一个拙劣的渲染。

您的<script>标记应该在<head>部分，而不是在页面正文的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});
    });
});

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

相关文章：