如何使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!