如何使div或对象逐渐移动到使用javascript点击鼠标点?
所以我有一个10×10像素的正方形或div。 我希望能够在浏览器窗口中的某个位置单击,使div逐渐向我单击的点移动。
$(document).click(function(event) { $('#divID').css({ 'position': 'absolute', 'left': event.clientX + document.body.scrollLeft, 'top': event.clientY + document.body.scrollTop }); });
演示
jQuery的
$(document).click(function(event) { var x = event.pageX, y = event.pageY; $('div').animate({ top: y, left: x }, 1000); });
CSS
div { background: red; padding: 5px; position: absolute; }
HTML
hello
jsFiddle 。
jQuery代码
$("body").bind("click", function(e){ var str = "( " + e.pageX + ", " + e.pageY + " )"; $("span").text("Clicked at " + str); });
得到这个之后你需要更新你的div.style.left和div.style.top!