JavaScript
搜索
分类

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>

JavaScript简单实现弹出拖拽窗口（一）

(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>

JavaScript简单实现弹出拖拽窗口（一）

注意：本文为原创，地址：http://www.cnblogs.com/wanghuih/p/5569438.html

标签：js,弹出,拖拽,窗口
0
投稿

猜你喜欢

  • Python通用验证码识别OCR库ddddocr的安装使用教程

    2021-11-04 21:21:27

  • PDO::query讲解

    2023-06-08 18:09:37

  • MYSQL教程:检查数据表和修复数据表

    2009-03-11 15:24:00

  • sqlserver 导出插入脚本代码

    2012-01-29 18:04:43

  • Python-opencv实现红绿两色识别操作

    2021-05-04 18:35:51

  • Python Pandas 如何shuffle（打乱）数据

    2023-04-22 23:17:16

  • Python实现学生管理系统的代码(JSON模块)

    2022-01-02 07:54:42

  • 卸载VS2011 Developer Preview后Sql Server2008 R2建立数据库关系图报“找不到指定的模块”错误的解决方法

    2011-11-03 16:49:09

  • Python asyncio异步编程简单实现示例

    2023-09-23 15:27:52

  • JS清空上传控件input(type="file")的值的代码第1/2页

    2023-08-13 07:22:28

  • Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答

    2023-05-18 19:52:33

  • Express无法通过req.body获取请求传递的数据解决方法

    2024-06-05 09:52:06

  • Python3网络爬虫中的requests高级用法详解

    2023-02-05 16:54:52

  • python 公共方法汇总解析

    2023-11-23 03:03:13

  • python+selenium 定位到元素,无法点击的解决方法

    2022-02-01 12:29:52

  • 数字人组件反写[asp组件开发实例2]

    2009-06-09 13:15:00

  • Oracle 8x监控sysdba角色用户登陆情况

    2010-07-16 12:48:00

  • Python 爬虫学习笔记之多线程爬虫

    2022-10-03 15:10:37

  • Python中拆分具有多个分隔符的字符串方法实例

    2022-07-01 00:38:20

  • python多进程共享变量

    2023-08-30 07:40:53
    • asp之家 网络编程 m.aspxhome.com