javascript弹出拖动窗口


Posted in Javascript onAugust 11, 2015

可以拖动的弹出窗口,在很多网页上都可以见到,非常的人性化,下面通过一段javascript代码就可以实现弹出拖动窗口,废话不多说了,直接贴代码了。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://3water.com/" />
<title>可以拖动的弹出窗口</title> 
<style type="text/css"> 
#popDiv 
{ 
 position:absolute; 
 visibility:hidden; 
 overflow:hidden; 
 border:2px solid #AEBBCA; 
 background-color:#EEF1F8; 
 cursor:move; 
 padding:1px; 
} 
#popTitle 
{ 
 background:#9DACBF; 
 height:20px; 
 line-height:20px; 
 padding:1px; 
} 
#popForm 
{ 
 padding:2px; 
} 
.title_left 
{ 
 font-weight:bold; 
 padding-left:5px; 
 float:left; 
} 
.title_right 
{ 
 float:right; 
} 
#popTitle .title_right a 
{ 
 color:#000; 
 text-decoration:none; 
} 
#popTitle .title_right a:hover 
{ 
 text-decoration:underline; 
 color:#FF0000; 
} 
</style> 
<script> 
function showPopup() //弹出层 
{ 
 var objDiv=document.getElementById("popDiv"); 
 objDiv.style.top="50px";//设置弹出层距离上边界的距离 
 objDiv.style.left="200px";//设置弹出层距离左边界的距离 
 objDiv.style.width="300px";//设置弹出层的宽度 
 objDiv.style.height="200px";//设置弹出层的高度 
 objDiv.style.visibility="visible"; 
} 
function hidePopup()//关闭层 
{ 
 var objDiv=document.getElementById("popDiv"); 
 objDiv.style.visibility="hidden"; 
} 
</script> 
</head> 
<body> 
<div id="popDiv"> 
 <div id="popTitle"> <!-- 标题div -->
 <span class="title_left">修改操作</span> 
 <span class="title_right" onClick="hidePopup()"><a href="#">关闭</a></span> 
 </div> 
 <div id="popForm"></div> 
</div> 
<input name="" type="button" onClick="showPopup()" value="操作" /> 
<script type="text/javascript"> 
var objDiv=document.getElementById("popDiv"); 
var isIE=document.all?true:false;//判断浏览器类型 
document.onmousedown = function(evnt)//当鼠标左键按下后执行此函数 
{ 
 var evnt=evnt?evnt:event; 
 if(evnt.button == (document.all ? 1 : 0)) 
 { 
 mouseD = true;//mouseD为鼠标左键状态标志,为true时表示左键被按下 
 } 
} 
objDiv.onmousedown = function(evnt) 
{ 
 objDrag=this;//objDrag为拖动的对象 
 var evnt=evnt?evnt:event; 
 if(evnt.button == (document.all?1 : 0)) 
 { 
 mx=evnt.clientX; 
 my=evnt.clientY; 
 objDiv.style.left=objDiv.offsetLeft+"px"; 
 objDiv.style.top=objDiv.offsetTop+"px"; 
 if(isIE) 
 { 
  objDiv.setCapture(); 
 } 
 else 
 { 
  window.captureEvents(Event.MOUSEMOVE); 
 } 
 } 
} 
document.onmouseup=function() 
{ 
 mouseD=false; 
 objDrag=""; 
 if(isIE) 
 { 
 objDiv.releaseCapture(); 
 } 
 else 
 { 
 window.releaseEvents(objDiv.MOUSEMOVE); 
 } 
} 
document.onmousemove=function(evnt) 
{ 
 var evnt=evnt?evnt:event; 
 if(mouseD==true&&objDrag) 
 { 
 var mrx=evnt.clientX-mx; 
 var mry=evnt.clientY-my; 
 objDiv.style.left = parseInt(objDiv.style.left) + mrx + "px"; 
 objDiv.style.top = parseInt(objDiv.style.top) + mry + "px"; 
 mx = evnt.clientX; 
 my = evnt.clientY; 
 } 
} 
</script> 
</body> 
</html>

以上是本文实现javascript弹出拖动窗口的全部内容,希望对大家有所帮助。

Javascript 相关文章推荐
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
实例讲解React 组件
Jul 07 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 #Javascript
javascript实现五星评价代码(源码下载)
Aug 11 #Javascript
jQuery的remove()方法使用详解
Aug 11 #Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 #Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 #Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 #Javascript
jquery实现滑动特效代码
Aug 10 #Javascript
You might like
php的计数器程序
2006/10/09 PHP
php对称加密算法示例
2014/05/07 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
python列出目录下指定文件与子目录的方法
2015/07/03 Python
解决Python传递中文参数的问题
2015/08/04 Python
python3 shelve模块的详解
2017/07/08 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python if语句知识点用法总结
2018/06/10 Python
Python中断多重循环的思路总结
2019/10/04 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
tensorflow 环境变量设置方式
2020/02/06 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
区域销售经理职责
2013/12/22 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
政协工作总结2015
2015/05/20 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL