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

更新时间：2016年06月17日 10:59:39 作者：我的前端之路

这篇文章主要为大家详细介绍了JavaScript简单实现弹出拖拽窗口的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JavaScript按位运算符的应用简析
下面根据自己的认知简单的谈一下js中的位操作使用（同样适用于其他语言），如果有错误，欢迎指正
2014-02-02
javascript让setInteval里的函数参数中的this指向特定的对象
话说阿里巴巴今年的校园招聘有一道题目考了一个知识点,那就是setInterval的参数函数里的this指向.
2010-01-01
将input框中输入内容显示在相应的div中【三种方法可选】
本篇文章主要介绍了在input框中输入内容，会相应的显示在下面的div中的不同做法：js方法；jQuery方法；AngularJs方法，具有很好的参考价值。下面跟着小编一起来看下吧
2017-05-05
基于javascript的无缝滚动动画1
这篇文章主要介绍了基于javascript的无缝滚动动画实现，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
window.onerror()的用法与实例分析
目前在做window.onerror时上报js错误信息的事，整理下相关资料,需要的朋友可以参考下
2016-01-01
js防止表单重复提交实现代码
重复提交、重复刷新、防止后退等等都是属于系统为避免重复记录而需要解决的问题，在客户端去处理需要针对每一种的可能提出相应的解决方案，然而在服务器端看来只不过是对于数据真实性的检验问题
2012-09-09
如何用JS判断数组中是否存在某个值或者某个对象的值
数组是我们编程中经常使用的的数据结构之一,在处理数组时，我们经常需要在数组中查找特定的值,下面这篇文章主要给大家介绍了关于如何用JS判断数组中是否存在某个值或者某个对象的值的相关资料,需要的朋友可以参考下
2023-01-01
xml和web特殊字符
在html和xml文件中，往往会因为以下特殊字符而导致文件解析出错，一般通过以下函数来处理。
2009-04-04
浅谈几种常用的JS类定义方法
下面小编就为大家带来一篇浅谈几种常用的JS类定义方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
轻松掌握JavaScript单例模式
这篇文章主要为大家详细介绍了JavaScript单例模式，帮助大家轻松掌握JS单例模式，感兴趣的小伙伴们可以参考一下
2016-08-08