JavaScript简单实现弹出拖拽窗口(一)
作者:我的前端之路 发布时间:2024-04-28 09:42:56
本文实例为大家分享JavaScript弹出拖拽窗口的具体实现代码,供大家参考,具体内容如下
需求说明:
1、点击页面按钮,弹出窗口;
2、要有半透明背景遮罩;
3、弹出窗口圆角,窗口半透明,但内容不透明;带阴影;
4、窗口可拖动;
5、拖动停止之后,滚动页面时窗口位置不动;
6、可以使用jQuery;
7、有关闭按钮;
进一步功能具体描述:
点按钮,会有一个可以拖拽的浮层出来。
有一个背景遮罩,支持标题栏的拖拽,在标题栏以外,在标题栏区域之外的区域拖拽是没有效果的,拖拽功能限定,他的拖拽功能被限定在可是可视区域内。
拖曳的思路:
获取鼠标的位置,鼠标移动的时候,获取鼠标的位置,获取x轴y轴,赋给窗口的x轴y轴,窗口弄成绝对定位。鼠标松开的时候把这个事件取消掉。
拖拽的实现原理:
鼠标移动的时候,拿鼠标移动时的坐标位置不断更新浮层的position。
1.鼠标在浮层元素按下的时候,把这个浮层元素标记为可以拖动。
2.鼠标移动的时候,我们先检测一下浮层元素标记的波动是不是可以拖动。如果是的话,让浮层跟着鼠标一起移动,不是的话就忽略。
3.鼠标松开的时候标记浮层元素不可以拖动
4.js拖拽主要用到了鼠标三个事件:mousedown、mousemove、mouseup。
mousedown:鼠标按下
mouseup:鼠标松开
mousemove:鼠标移动
备注:mousedown和click的区别:鼠标点击的整个过程会发生 mousedown→mouseup→click三个事件, click在最后鼠标松开之后才会发生。
说到这里,我们就不得不讲一下鼠标事件。
下面简单的讲一下鼠标事件:
(1)click事件
(2)dbclick事件
(3)mousedown事件
(4)mouseup事件
(5)mouseenter事件
(6)mouseover事件
(7)mouseleaver事件
(8)mouseout事件
解释:(鼠标事件的解释说明选自w3school)
(1)click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发。
(2) dbclick事件:当双击元素时,会发生 dblclick 事件。当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。在很短的时间内发生两次 click,即是一次 double click 事件。
实例:
当双击按钮时,隐藏或显示元素:
$(document).ready(function(){
$("button").dblclick(function(){
$("p").slideToggle();
});
});
(3)mousedown事件:当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown 事件。与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。
$(document).ready(function(){
$("button").mousedown(function(){
$("p").slideToggle();
});
});
(4)mouseup事件:当在元素上放松鼠标按钮时,会发生 mouseup 事件。
与 click 事件不同,mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。
$(document).ready(function(){
$("button").mouseup(function(){
$("p").slideToggle();
});
});
(5)mouseenter事件:当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与 mouseleave 事件一起使用。
注释:与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
(6)mouseover事件:当鼠标指针位于元素上方时,会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。
注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
});
mouseenter 与 mouseover 的不同
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件:<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件:<span></span></h2>
</div>
</body>
</html>
(7)mouseleaver事件:当鼠标指针穿过元素时,会发生 mouseenter 事件。
该事件大多数时候会与 mouseleave 事件一起使用。
注释:与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。
(8)mouseout事件
当鼠标指针从元素上移开时,发生 mouseout 事件。
该事件大多数时候会与 mouseover 事件一起使用。
注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
请看下面例子的演示。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.out").mouseout(function(){
$(".out span").text(x+=1);
});
$("div.leave").mouseleave(function(){
$(".leave span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。</p>
<p>只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。</p>
<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseout 事件:<span></span></h2>
</div>
<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseleave 事件:<span></span></h2>
</div>
</body>
</html>
注意:本文为原创,地址:http://www.cnblogs.com/wanghuih/p/5569438.html
猜你喜欢
- 没错,全网最帅的比卡丘在我这~~~为了访问 Python 库,您需要将它导入到您的 Python 环境中,使用以下命令将其导入 turtle
- 该方法编辑于2021年2月7日,自己使用的版本是8.0.23,事情的起因要从袁隆平教授说起…要从一本教科书说起,有一章节是“MySQL安全管
- 1. 实验目的掌握最小二乘法求解(无惩罚项的损失函数)、掌握加惩罚项(2 范数)的损失函数优化、梯度下降法、共轭梯度法、理解过拟合、克服过拟
- 比如说在1-3000之内生成随机永不重复数,点击运行代码的时候请注意,此代码比较占用资源,如果硬件配置比较菜请把count改小。俺的电脑配置
- 前言问题需求:拥有两个文件夹,一个保存图片image,一个保存标签文件,要求把标签文件中的标注提取出来,并在图片中画出来相应的思路首先提出各
- 1. 在猜年龄的基础上编写登录、注册方法,并且把猜年龄游戏分函数处理,如2. 登录函数3. 注册函数4. 猜年龄函数5. 选择奖品函数代码如
- 运行环境: CentOS6.5_x64Python版本 : 2.6使用pyinstaller打包pyinstaller可以将python程序
- 最近在学爬虫时发现许多网站都有自己的反爬虫机制,这让我们没法直接对想要的数据进行爬取,于是了解这种反爬虫机制就会帮助我们找到解决方法。常见的
- 假设现在有如下N条记录 表明叫book id author title 1 aaa AAA 2 bbb BBB 3 ccc CCC 4 dd
- 本文实例为大家分享了python实现手机销售管理系统的具体代码,供大家参考,具体内容如下要求如下:手机销售系统 &nb
- 1.软件环境??Windows10 教育版64位Python 3.6.3PyAV 8.0.32.问题描述??在提取视频文件的关键内容时,手动
- typora介绍Typora是一款Markdown编辑器和阅读器风格极简/多种主题/支持 macOS,Windows 及 Linux实时预览
- 偶第一次发主题, 这个是在一个项目中的做...写的一般般, 有什么bug之类的是在所难免, 望见谅功能说明:1. 即时控制用户输入2. 将输
- 在CSS中,模式(pattern)匹配规则决定那种样式规则应用于文档树(document tree)的哪个元素。这些模式叫着选择符(sele
- 继承是面向对象编程的一个重要的方式,通过继承,子类就可以扩展父类的功能。在python中一个类能继承自不止一个父类,这叫做python的多重
- 我的 jupyter-bootbook 是在 ubuntu 下安装 anaconda 获得的,下面的命令在 Windows 下大部分可以运行
- 引言最近再做图像处理相关的操作的时间优化,用到了OpenCV和Pillow两个库,两个库各有优缺点。各位小伙伴需要按照自己需求选用。本篇博客
- 使用tf.keras.MaxPooling1D出现错误错误如下ValueError: Negative dimension size cau
- 工作中经常遇到阿拉伯数字转换称为中文数字或者大写金额,在网上搜了下,cn2an口碑较好,遂进行了一番学习。安装pip install cn2
- 1.2 本篇文章内容概要1.3 本篇文章内容概括在SQL语句中,关于表连接,若按照表的数量来划分,可以划分为单表连接、两表连接和两表以上连接