如何使div或对象逐渐移动到点击鼠标点击鼠标？

Question

所以我有一个10x10像素的正方形或div。我希望能够在浏览器窗口中的某个位置点击，使div逐渐向我点击的位置移动。

Answer 1

的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

<div>hello</div>

jsFiddle

Answer 2

jQuery代码

$("body").bind("click", function(e){
  var str = "( " + e.pageX + ", " + e.pageY + " )";
  $("span").text("Clicked  at " + str);
});

获得此项后，您需要更新div.style.left和div.style.top！

Answer 3

$(document).click(function(event) {
    $('#divID').css({
       'position': 'absolute', 
       'left': event.clientX + document.body.scrollLeft, 
       'top': event.clientY + document.body.scrollTop });
});

Demo