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

来源：互联网发布：美工岗位职责编辑：程序博客网时间：2024/05/29 12:16

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

2.效果图

3.代码如下：

<!DOCTYPE html>
<htmllang="en">

<head>
<title>js控制div位置动态变化</title>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1">
<scriptsrc="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>
<divclass="container">
<divclass="preview"></div>
<divclass="preview"></div>
<divclass="preview"></div>
<divclass="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>

阅读全文

0 0