利用pageX、pageY动态的改变div的位置

1.需求是：当鼠标动态的变化时，即鼠标在不同的DOM上触发事件，div的位置也会不断的发生改变。

2.效果图

3.代码如下：

<! DOCTYPE html >

< html lang = "en" >

< head >

< title > js控制div位置动态变化 </ title >

< meta charset = "UTF-8" >

< meta name = "viewport" content = "width=device-width, initial-scale=1" >

< script src = "js/jquery.js" > < / script >

< style >

.preview {

width : 100px ;

height : 100px ;

border : 1px solid gray ;

margin-left : 20px ;

float : left ;

}

#preview {

width : 300px ;

height : 200px ;

border : 1px solid gray ;

position : absolute ;

}

< / style >

</ head >

< body >

< div class = "container" >

< div class = "preview" ></ div >

< div class = "preview" ></ div >

< div class = "preview" ></ div >

< div class = "preview" ></ div >

</ div >

< script >

//offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

this . imagePreview = function () {

// 起始偏移量

xOffset = 10 ;

yOffset = 30 ;

$ ( ".preview" ). hover ( function ( e ) {

$ ( "body" ). append ( "<div id='preview'></div>" );

// pageX() 属性是鼠标指针的位置，相对于文档的左边缘

// pageY() 属性是鼠标指针的位置，相对于文档的上边缘。

$ ( "#preview" )

. css ( "top" , ( e . pageY - xOffset) + "px" )

. css ( "left" , ( e . pageX + yOffset) + "px" )

. fadeIn ( "fast" );

},

function () {

$ ( "#preview" ). remove ();

}

);

// 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

$ ( ".preview" ). mousemove ( function ( e ) {

$ ( "#preview" )

. css ( "top" , ( e . pageY - xOffset) + "px" )

. css ( "left" , ( e . pageX + yOffset) + "px" );

});

};

$ ( document ). ready ( function () {

imagePreview ();

});

< / script >

</ body >

</ html >