JavaScript简单实现弹出拖拽窗口(一)


Posted in Javascript onJune 17, 2016

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js操作二级联动实现代码
Jul 27 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
js中for in的用法示例解析
Dec 25 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 #Javascript
聊一聊JS中this的指向问题
Jun 17 #Javascript
json实现添加、遍历与删除属性的方法
Jun 17 #Javascript
confirm确认对话框的实现方法总结
Jun 17 #Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 #Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 #Javascript
基于JQuery实现分隔条的功能
Jun 17 #Javascript
You might like
PHP使用者状态管理功能的应用
2006/10/09 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
Python 探针的实现原理
2016/04/23 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python字符串循环左移
2019/03/08 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
学生会部长竞选稿
2015/11/19 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python