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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ
-
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
我们之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进.先看下效果图: 原有百度的Popup.js在有 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
-
js实现小窗口拖拽效果
本文实例为大家分享了js实现窗口拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 300px; width: 300px; background-color: green; po
-
javascript实现漂亮的拖动层，窗口拖拽特效
javascript实现漂亮的拖动层,窗口拖拽特效 <!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> <meta
-
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页
在阅读本文之前,请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性,因为循序渐进是一个很好的习惯,值得提倡.好了,看看我们今天的内容吧. 首先让我们先看一看element.offsetLeft属性. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ 定义:返回一个像素数值,它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量.
-
JavaScript简单实现弹出拖拽窗口（二）
接上文JavaScript简单实现弹出拖拽窗口(一)进行学习. 下面开始具体分析代码部分: 首先我们先确认下结构: 悬浮窗口:初始不可见.包括标题栏和内容栏,标题栏内有标题和关闭按钮. 遮罩层:初始不可见.用于设置弹出悬浮窗口时的半透明背景, 按钮:用于点击弹出悬浮窗口. 下面进行详细解释 1.要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute): /*登录浮层组件*/ .popup{ display:none; /*初始隐藏*/ widt
-
关于js拖拽上传 [一个拖拽上传修改头像的流程]
如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其中的要点和实践体会做一点总结. 先看一下总体视图:1. 文件拖拽接受区域要有明显的标示,并且要尽可能的大(由于版面的原因,这个界面的拖放盒子并不大).可以用虚线框盒子等样式吸引用户拖拽文件.最好有明显的文字提示和图标配合. 2. 在交互体验上当文件拖入浏览器窗口时,可以用拖放区变换背景颜色等向用户发起放置操作邀请. 实现代码: 复制代码 代码如下: doc.bind({ 'drage
-
javascript支持firefox,ie7页面布局拖拽效果代码
javascript 拖拽JavaScript Google IG Drag Demo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖 动 拖拽效果的页面效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag.htm加强版效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag2.htm拖拽原理: 关于拖拽的基础,可以参考这篇文章,讲得非常不错. 其实原理很简单,就是
-
JavaScript简单实现弹出拖拽窗口（一）
本文实例为大家分享JavaScript弹出拖拽窗口的具体实现代码,供大家参考,具体内容如下 需求说明: 1.点击页面按钮,弹出窗口: 2.要有半透明背景遮罩: 3.弹出窗口圆角,窗口半透明,但内容不透明:带阴影: 4.窗口可拖动: 5.拖动停止之后,滚动页面时窗口位置不动: 6.可以使用jQuery: 7.有关闭按钮: 进一步功能具体描述: 点按钮,会有一个可以拖拽的浮层出来. 有一个背景遮罩,支持标题栏的拖拽,在标题栏以外,在标题栏区域之外的区域拖拽是没有效果的,拖拽功能限
-
javascript实现右侧弹出“分享到”窗口效果
本文实例讲解了javascript实现右侧弹出"分享到"窗口的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta charset="gb2312"> <title></title> <style type="text/css"> body { padding: 0; margin: 0; } #div1 { width:
-
用javascript父窗口控制只弹出一个子窗口
近来网上经常流传一些关于如何在父窗口控制只弹出一个子窗口 问题,我查看了一些,大部分都是只能解决部分或者很麻烦,还不算完美.比如有人是实现的这样,使用的是Cookie,以下是例子. 主页上做了一个弹出窗口,如何使其只弹出一次,返回主页时不再弹出了. --------------------------------------------------------------- <script> window.open("http://www.yeboss.com.cn",&q
-
详解JavaScript面向对象实战之封装拖拽对象
目录 概述 1.如何让一个DOM元素动起来 2.如何获取当前浏览器支持的transform兼容写法 3.如何获取元素的初始位置 5.我们需要用到哪些事件? 6.拖拽的原理 7. 我又来推荐思维导图辅助写代码了 8.代码实现 part1.准备工作 part2.功能函数 part3.声明三个事件的回调函数 9.封装拖拽对象 概述 为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽. 不封装对象直接实现: 利用原生JavaScript封装拖拽对象: 通过扩展jQuery来实现拖
-
基于JavaScript实现右键菜单和拖拽功能
下面先给大家介绍下js实现的右键菜单功能,具体详情如下所示: 这一章解决的问题 1.实现右键菜单功能代码. 2.阻止默认事件的实际应用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu {
-
Android使用Activity实现从底部弹出菜单或窗口的方法
本文实例讲述了Android使用Activity实现从底部弹出菜单或窗口的方法.分享给大家供大家参考,具体如下: 这里使用activity实现弹出滑动窗口或菜单,主要是使用了一些设置activity的样式来实现弹出窗口和滑动效果,实现如下: 第一步:设计要弹出窗口的xml布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://sche
-
JavaScript常用的弹出广告及背投广告实现方法
本文实例讲述了JavaScript常用的弹出广告及背投广告实现方法.分享给大家供大家参考.具体分析如下: 弹出广告和背景广告在大网站用的比较多,也是站长的必备代码,本代码段中包括弹出窗口广告以及背投广告两种形式,根据自己的需要,你可以随意选择. 注:这类广告不建议大家用,大多浏览器都会把此类AD拦截,只为大家学习之用. 复制代码 代码如下: <html> <head> <title>JavaScript常用的弹出广告及背投广告代码</title> </
-
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码.JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口. 运行效果截图如下: 在线演示地址如下: http://demo.jb51
-
JavaScript动态修改弹出窗口大小的方法
本文实例讲述了JavaScript动态修改弹出窗口大小的方法.分享给大家供大家参考.具体如下: 下面的JS代码演示了如何通过window.open弹出一个新的窗口,然后动态修改窗口大小 <!DOCTYPE html> <html> <head> <script> var w; function openwindow() { w=window.open('','', 'width=100,height=100'); w.focus(); } function