JavaScript实现鼠标控制自由移动的窗口
更新时间：2021年06月22日 10:23:15 作者：妄痴梦中
这篇文章主要为大家详细介绍了JavaScript实现鼠标控制自由移动的窗口，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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;
/**
* 按下鼠标后移动函数，当鼠标移动是执行该函数，移动div
*/
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Jjcarousellite 实现图片列表滚动的简单实例，有需要的朋友可以参考一下2013-11-11
在Openlayers中,长度和面积的测量均依赖ol/sphere模块,长度通过getLength方法计算,面积则通过getArea方法,面积测量不是计算平面面积,而是基于球面,适用于多边形和多多边形集合,感兴趣的朋友一起看看吧2024-11-11
浅谈js图片前端预览之filereader和window.URL.createObjectURL
下面小编就为大家带来一篇浅谈js图片前端预览之filereader和window.URL.createObjectURL。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了js中style.display=""无效的解决方法,是js程序设计中非常常见的问题,需要的朋友可以参考下2014-10-10
在《理解Javascript_12_执行模型浅析》一文中,我们初步的了解了执行上下文与作用域的概念，那么这一篇将深入分析执行上下文的构建过程，了解执行上下文、函数对象、作用域三者之间的关系。2010-10-10
这两天一直在弄ajax，用多了才发现了ajax 的cache问题，请求了好多次，得到了确是相同的结果，经常我想在请求的同时去做一些其它的事情，我在想javascript里有没有办法用多线程，经过在网上查找找到了结果。2008-11-11
在 JavaScript 中,对象的去重通常是指在一个对象数组中,根据某些属性值去掉重复的对象,本文给大家总结了一些JS对象去重的多种方式,并通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了JS实现页面滚动到关闭时的位置与不滚动效果,滚动有两种方案，其一，利用路由中的meta，在离开页面时缓存 top 信息，其二，利用keep-alive缓存整个页面。但是仅限于没有实时数据变动的页面，需要的朋友可以参考下本文2022-06-06
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码，需要的朋友可以参考下。2011-05-05
这篇文章主要介绍了JS上传图片前实现图片预览效果的方法,涉及javascript操作图片的技巧,需要的朋友可以参考下2015-03-03
最新评论