本文实例为大家分享了javascript实现鼠标控制自由窗口的具体代码，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html lang
本文实例为大家分享了javascript实现鼠标控制自由窗口的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用鼠标移动的窗口</title>
<style>
.mainDiv {
width: 350px;
height: 200px;
border: 2px black solid;
position: absolute;
}
.titleDiv {
width: 350px;
height: 30px;
background-color: YellowGreen ;
text-align: center;
line-height: 30px;
}
.contentDiv {
width: 350px;
height: 170px;
background-color: SandyBrown ;
text-align: center;
}
</style>
</head>
<body>
<!--onmousedown：事件会在鼠标按键被按下时发生; onmousemove：事件会在鼠标指针移到指定的对象时发生-->
<div class="mainDiv" id="mainDiv" style="top: 20px;left: 20px">
<div class="titleDiv" id="titleDiv" onmousedown="mouseDown()" onmouseup="mouseUp()">
标题栏
</div>
<div class="contentDiv">
《鼠标可控的自由窗口》<br>
注意：没有给mainDiv设置position为absolute前不能移动
</div>
</div>
<script>
var dx;
var dy;
var mainDivObj = null;
var titleDivObj = null;
function mouseDown() {
//获得鼠标的键值，0是鼠标左键；1是鼠标滚轴键；2是鼠标右键
if (event.button == 0) {
mainDivObj = document.getElementById("mainDiv");
titleDivObj = document.getElementById("titleDiv");
//设置鼠标样式
titleDivObj.style.cursor = "move";
//设置主div的阴影样式
mainDivObj.style.boxShadow = "0px 0px 10px #000";
//获得鼠标当前坐标
let x = event.x;
let y = event.y;
dx = x - parseInt(mainDivObj.style.left);
dy = y - parseInt(mainDivObj.style.top);
}
}
//鼠标移动的时候调用
document.onmousemove = mouseMove;
function mouseMove() {
if (mainDivObj != null) {
//获得鼠标当前移动的坐标位置
let x = event.x;//鼠标移动的x轴的坐标
let y = event.y;//鼠标移动的y轴的坐标
//计算div移动后的left与top的距离
//使用当前坐标减去鼠标在div中的位置与div左边与顶端的距离
let left = x - dx;
let top = y - dy;
//设置div新的坐标位置
mainDivObj.style.left = left + "px";
mainDivObj.style.top = top + "px";
}
}
function mouseUp() {
if (mainDivObj != null) {
dx = null;
dy = null;
//设置div的阴影样式
mainDivObj.style.boxShadow="none";
mainDivObj = null;
titleDivObj.style.cursor="pointer";
titleDivObj = null;
}
}
</script>
</body>
</html>--结束END--
本文标题: JavaScript实现鼠标控制自由移动的窗口
本文链接: https://www.lsjlt.com/news/128795.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0