Question

我希望我创建的div会在鼠标靠近他时移动。

基本开始代码（因为我不知道怎么做）：

$('#leaf').();

Answer 1

将功能绑定到鼠标的移动。当鼠标移动时：

获取元素的坐标。
获取光标的坐标。
将光标坐标与元素坐标进行比较。
如果光标在元素附近，则移动元素 - 否则不执行任何操作。

简单的东西。

Answer 2

这是一个开始。每次鼠标移动到叶子外面时，都会显示一条消息。

$('body').mousemove(function(e){
    var w = $('#leaf').outerWidth(),
        h = $('#leaf').outerHeight(),
        x = e.pageX,
        y = e.pageY;

    if(x > w && y > h)
    {
        console.log("The leaf is moving");
    }
})

此外，您可以将一些带有js的css应用于叶子以进行移动等。在一个更复杂的示例中，您必须更仔细地查看位置，而不是仅仅依赖于图像的宽度和高度。

Answer 3

这是一个开始。

http://jsfiddle.net/Lpg8x/80/

   $( 'body' ).mousemove( function( event ) {

if( isNear( $( '#near' ), 20, event ) ) {

    $( '#near' ).html( 'is near!' );

} else {

    $( '#near' ).empty();

};

} );           

 function isNear( $element, distance, event ) {

var left = $element.offset().left - distance,
    top = $element.offset().top - distance,
    right = left + $element.width() + ( 2 * distance ),
    bottom = top + $element.height() + ( 2 * distance ),
    x = event.pageX,
    y = event.pageY;

return ( x > left && x < right && y > top && y < bottom );

 };

玩得开心！

Answer 4

以下是您实际完成所有操作的基本工作示例 http://jsfiddle.net/jLAq3/10/

var leafX = 0, leafY = 0;
$('#leaf').css({position: 'relative'});
$(document).mousemove(function(e){
    var offset = $('#leaf').offset()
        ,x1 = offset.left - 20
        ,x2 = offset.left + $('#leaf').width() + 20
        ,y1 = offset.top
        ,y2 = offset.top + $('#leaf').height() + 20 
        ,center, mousePos
    ;

    if(e.pageX > x1 && e.pageX < x2 && e.pageY > y1 && e.pageY < y2) {
        center = (x2 - x1) / 2;
        mousePos = e.pageX - x1;
        if(mousePos < center) {
            leafX += 20;
        } else {
            leafX -= 20;
        }

        center = (y2 - y1) / 2;
        mousePos = e.pageY - y1;
        if(mousePos < center) {
            leafY += 20;
        } else {
            leafY -= 20;
        }
    }


    $('#leaf').css({ top : leafY + 'px', left : leafX + 'px'});
});

但是你应该在跳入事物之前先学习DHTML的基础知识，例如绝对位置和相对位置之间的区别，如何实际移动HTML元素，分层，事件绑定等。

这里有几个很好的资源：
http://www.quirksmode.org/sitemap.html
http://www.w3schools.com/

当鼠标靠近时移动div

4 个答案: