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
>