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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Python爬虫之Selenium多窗口切换的实现
前言:在页面操作过程中有时候点击某个链接会弹出新的窗口,但由于Selenium的所有操作都是在第一个打开的页面进行的,这时就需要主机切换到新打开的窗口上进行操作.WebDriver提供了switch_to.window()方法,可以实现在不同的窗口之间切换. 以百度首页和百度注册页为例,在两个窗口之间的切换. 本章中用到的关键方法如下: current_window_handle:获得当前窗口句柄 window_handles:返回所有窗口的句柄到当前会话 switch_to.window():
-
C#仿QQ聊天窗口
本文实例为大家分享了C#实现QQ聊天窗口的具体代码,供大家参考,具体内容如下 效果图: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows
-
可视化工具PyVista多线程显示多窗口的实例代码
在使用PyVista进行多线程同时显示多个窗口的时候,发现开启多个线程显示窗口,窗口会卡死,于是便有了这篇文章. 发现问题 在可视化工具--利用PyVista进行mesh的色彩映射这篇博客中,我们实现了使用四种方法对mesh进行色彩映射,为了对这四种方法映射结果有一个直观的认识,我第一个想法就是开启四个线程,分别调用这四个函数. 代码如下: 定义四个色彩映射函数: import pyvista as pv import matplotlib.pyplot as plt from matplotl
-
Java窗口精细全方位讲解
目录 一.新建简单窗口 二.编写窗口中的按键 三.简单的按键运行 1.流布局管理器: 2.静态文本框: 四.窗口画图 五.窗口鼠标响应 六.总结 好了,stop! 我们呢 咳咳咳 下面呢 也就直接进入正题!!! 一.新建简单窗口 在java中新建窗口将会用到"java.awt",大家可以参见API文档 import java.awt.*; //包含用于创建用户界面和绘制图形图像的所有类. 这是API文档的下载链接: API下载地址 我呢用的是Notpad++进行编写的,所以就用这个直接
-
Pyqt5 实现窗口缩放,控件在窗口内自动伸缩的操作
在Qtdesigner中新建一个主界面如下所示: ctrl+R 预览 从预览图中可以看出这时的界面不支持伸缩,拖动过小的话会导致部分界面遮住不可见,这时我们就要用到布局选项,首先对上面的按钮和文本框布局按住ctrl选中要布局的控件 根据实际情况选中工具栏上的布局按钮,我这里是网格布局 选中后如下所示 然后在对底下的listwidget和tablewidget进行水平布局,布局完成后如下所示,其中有个细节是还要对Qgroupbox在进行一次水平或垂直布局,具体是选中Qgroupbox控件然后点击水
-
Android窗口小部件基础编写代码实例
实现窗口小部件,访问手机储存卡指定目录中的图片文件,然后随机选择一张在窗口的小部件中显示.图片路径使用List存储,适合初级Android学习者参考.本系统无服务,不能保证进程长存. 新建一个空的布局项目,然后新建一个Widget,如图所示: 在新建的xml和java实现类中进行编写即可. picture_widget.xml文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quo
-
Java 滑动窗口最大值的实现
一.题目 给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧.你只可以看到在滑动窗口内的 k 个数字.滑动窗口每次只向右移动一位. 返回滑动窗口中的最大值. 二.单调队列解析 题目让求随着滑动窗口的滑动,返回窗口覆盖范围的最大值 该题不适合优先级队列,因为采用大顶堆存放k个数字,可以知道此时的最大值,但是窗口是滑动的,大顶堆每次只能弹出最大值,无法移除其他值,即无法用大顶堆维护滑动窗口里的值. 所以采用队列维护,随着窗口的移动,队列先进先出 此时对队列的要求
-
C语言实现四窗口聊天
C语言实现四窗口聊天,供大家参考,具体内容如下 为了练习前段时间学习的共享内存.管道.消息队列等进程同步机制,做了一个聊天小项目. 项目描述: 有4个进程,A进程和B进程负责通信,从标准输入读到的字符串通过管道发给对方,A1和B1进程负责显示,其中: A进程和B进程通过管道通信,A进程和A1进程通过共享内存通信,B进程和B1进程通过消息队列通信: A进程从标准输入读到的字符串后,放到管道和共享内存里,从管道中读到的字符串放到共享内存里,B进程从管道中拿到A放的字符串,A1进程到共享内存中拿到字符
-
JavaScript实现鼠标控制自由移动的窗口
本文实例为大家分享了JavaScript实现鼠标控制自由窗口的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用鼠标移动的窗口</title> <style> .mainDiv { width: 350px; height: 200px; borde
-
javascript 控制弹出窗口
前言:经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息 .警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段javascript代码即可实现.下面我就带您剖析它的奥秘. [1.最基本的弹出窗口代码] <SCRIPT LANGUAGE="javascript">
-
JavaScript实现鼠标滚轮控制页面图片切换功能示例
本文实例讲述了JavaScript实现鼠标滚轮控制页面图片切换功能.分享给大家供大家参考,具体如下: 鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读.对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢? 最常见就是图片的切换了,能通过滚动滚轮进行图片的浏览,省得用户还要去点下一张,做这种繁琐的步骤.来看个简单的例子吧. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
-
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
offset offset 即偏移量,使用 offset 系列相关属性可以 动态的 获取该元素的位置(偏移).大小等,如: 元素距离带有定位父元素的位置 获取元素自身的大小(宽度高度) 注:返回的数值不带单位 offset 系列常用的属性包括: element.offsetParent 返回作为该元素带有定位的父级元素,如果父级元素没有定位,则返回 body 注意,parentNode 和 offsetParent 还是有本质上的区别的:parentNode 返回的是直接
-
jQuery实现鼠标悬停显示提示信息窗口的方法
本文实例讲述了jQuery实现鼠标悬停显示提示信息窗口的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
-
JS获取鼠标位置距浏览器窗口距离的方法示例
本文实例讲述了JS获取鼠标位置距浏览器窗口距离的方法.分享给大家供大家参考,具体如下: 先来看看运行效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #test_div { width:400px; height: 400px;
-
基于JavaScript获取鼠标位置的各种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. functi
-
JavaScript实现鼠标滑过处生成气泡的方法
本文实例讲述了JavaScript实现鼠标滑过处生成气泡的方法.分享给大家供大家参考.具体实现方法如下: <HTML> <HEAD> <title>鼠标周围在网页上生成气泡</title> </HEAD> <BODY bgColor=#000000 scroll=no onload=zyva()> <div id=aqua style="position:absolute;left=0;top=0;">
-
基于JavaScript实现鼠标向下滑动加载div的代码
废话不多说了,关键代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new
-
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
JavaScript获取鼠标移动时的坐标(兼容:IE8.谷歌.Firefox.Opera ),测试通过 直接复制成html文件,即可运行. 为方便大家测试特准备了一份在线演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo