我试图通过 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:(在我的 body 标签内)
<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
。这只是一个错误的渲染。
关于javascript - 通过 JQuery 将 img 的位置动态更改为鼠标位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18028919/