首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Js可拖拽放大的层拖动特效实现方法

Posted in Javascript onFebruary 25, 2015

本文实例讲述了Js可拖拽放大的层拖动特效实现方法。分享给大家供大家参考。具体实现方法如下：

<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Js实现层拖动效果，还可以拖拽放大</title>

<style>

*{margin:0;padding:0;}

#zhezhao{

 width:100%;

 height:100%;

 background:#f00;

 filter:alpha(opacity:0);

 opacity:0;

 z-index:9999;

 position:absolute;

 top:0;

 left:0;

 display:none;

}

#div2{

 width:200px;

 height:200px;

 position:relative;

 background:#EEEEEE;

 border:1px solid #f00;

}

#div1{

 width:15px;

 height:15px;

 background:#99CC00;

 position:absolute;

 right:0px;

 bottom:0px;

 cursor:nw-resize;

 overflow:hidden;

 font-size:12px;

 text-align:center;

 line-height:15px;

 color:#FFFFFF;

 float:right;

 z-index:3;

}

#right{

 width:15px;

 height:100%;

 background:#f00;

 float:right;

 position:absolute;

 right:0;

 top:0;

 cursor:e-resize;

 overflow:hidden;

 filter:alpha(opacity:0);

 opacity:0;

 z-index:1;

}

#bottom{

 width:100%;

 height:15px;

 background:#f00;

 position:absolute;

 left:0;

 bottom:0;

 cursor:n-resize;

 overflow:hidden;

 filter:alpha(opacity:0);

 opacity:0;

 z-index:1;

}

#div2 p{

 padding:10px;

 line-height:24px;

 font-size:13px;

 text-indent:24px;

 color:#996600;

}

#div2 h2{

 width:100%;

 height:25px;

 line-height:25px;

 font-size:14px;

 background:#CC9900;

 color:#FFFFFF;

 text-indent:15px;

 cursor:move;

 overflow:hidden;

}

</style>

<script type="text/javascript">

window.onload=function()

{

 var oDiv=document.getElementById("div1");

 var oDiv2=document.getElementById("div2");

 var zhezhao=document.getElementById("zhezhao");

 var h2=oDiv2.getElementsByTagName("h2")[0];

 var right=document.getElementById("right");

 var bottom=document.getElementById("bottom");

 var mouseStart={};

 var divStart={};

 var rightStart={};

 var bottomStart={};

 //往右拽

 right.onmousedown=function(ev)

 {

  var oEvent=ev||event;

  mouseStart.x=oEvent.clientX;

  mouseStart.y=oEvent.clientY;

  rightStart.x=right.offsetLeft;

  if(right.setCapture)

  {

   right.onmousemove=doDrag1;

   right.onmouseup=stopDrag1;

   right.setCapture();

  }

  else

  {

   document.addEventListener("mousemove",doDrag1,true);

   document.addEventListener("mouseup",stopDrag1,true);

  }

 };

 function doDrag1(ev)

 {

  var oEvent=ev||event;

  var l=oEvent.clientX-mouseStart.x+rightStart.x;

  var w=l+oDiv.offsetWidth;

  

  if(w<oDiv.offsetWidth)

  {

   w=oDiv.offsetWidth;

  }

  else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)

  {

   w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;

  }

  oDiv2.style.width=w+"px";

 };

 function stopDrag1()

 {

  if(right.releaseCapture)

  {

   right.onmousemove=null;

   right.onmouseup=null;

   right.releaseCapture();

  }

  else

  {

   document.removeEventListener("mousemove",doDrag1,true);

   document.removeEventListener("mouseup",stopDrag1,true);

  }

 };

 //往下拽

 bottom.onmousedown=function(ev)

 {

  var oEvent=ev||event;

  mouseStart.x=oEvent.clientX;

  mouseStart.y=oEvent.clientY;

  bottomStart.y=bottom.offsetTop;

  if(bottom.setCapture)

  {

   bottom.onmousemove=doDrag2;

   bottom.onmouseup=stopDrag2;

   bottom.setCapture();

  }

  else

  {

   document.addEventListener("mousemove",doDrag2,true);

   document.addEventListener("mouseup",stopDrag2,true);

  }

 };

 function doDrag2(ev)

 {

  var oEvent=ev||event;

  var t=oEvent.clientY-mouseStart.y+bottomStart.y;

  var h=t+oDiv.offsetHeight;

  

  if(h<oDiv.offsetHeight)

  {

   h=oDiv.offsetHeight;

  }

  else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)

  {

   h=document.documentElement.clientHeight-oDiv2.offsetTop-2;

  }

  

  oDiv2.style.height=h+"px";

 };

 function stopDrag2()

 {

  if(bottom.releaseCapture)

  {

   bottom.onmousemove=null;

   bottom.onmouseup=null;

   bottom.releaseCapture();

  }

  else

  {

   document.removeEventListener("mousemove",doDrag2,true);

   document.removeEventListener("mouseup",stopDrag2,true);

  }

 };

 //往左右同时拽

 oDiv.onmousedown=function(ev)

 {

  var oEvent=ev||event;

  mouseStart.x=oEvent.clientX;

  mouseStart.y=oEvent.clientY;

  divStart.x=oDiv.offsetLeft;

  divStart.y=oDiv.offsetTop;

  if(oDiv.setCapture)

  {

   oDiv.onmousemove=doDrag;

   oDiv.onmouseup=stopDrag;

   oDiv.setCapture();

  }

  else

  {

   document.addEventListener("mousemove",doDrag,true);

   document.addEventListener("mouseup",stopDrag,true);

  }

  zhezhao.style.display='block';

 };

 function doDrag(ev)

 {

  var oEvent=ev||event;

  var l=oEvent.clientX-mouseStart.x+divStart.x;

  var t=oEvent.clientY-mouseStart.y+divStart.y;

  

  

  var w=l+oDiv.offsetWidth;

  var h=t+oDiv.offsetHeight;

  

  if(w<oDiv.offsetWidth)

  {

   w=oDiv.offsetWidth;

  }

  else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)

  {

   w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;

  }

  if(h<oDiv.offsetHeight)

  {

   h=oDiv.offsetHeight;

  }

  else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)

  {

   h=document.documentElement.clientHeight-oDiv2.offsetTop-2;

  }

  

  oDiv2.style.width=w+"px";

  oDiv2.style.height=h+"px";

 };

 function stopDrag()

 {

  if(oDiv.releaseCapture)

  {

   oDiv.onmousemove=null;

   oDiv.onmouseup=null;

   oDiv.releaseCapture();

  }

  else

  {

   document.removeEventListener("mousemove",doDrag,true);

   document.removeEventListener("mouseup",stopDrag,true);

  }

  zhezhao.style.display='none';

 };

 

 //h2完美拖拽

 h2.onmousedown=function(ev)

 {

  var oEvent=ev||event;

  mouseStart.x=oEvent.clientX;

  mouseStart.y=oEvent.clientY;

  divStart.x=oDiv2.offsetLeft;

  divStart.y=oDiv2.offsetTop;

  

  if(h2.setCapture)

  {

   h2.onmousemove=doDrag3;

   h2.onmouseup=stopDrag3;

   h2.setCapture();

  }

  else

  {

   document.addEventListener("mousemove",doDrag3,true);

   document.addEventListener("mouseup",stopDrag3,true);

  }

  

  zhezhao.style.display='block';

 };

 function doDrag3(ev)

 {

  var oEvent=ev||event;

  var l=oEvent.clientX-mouseStart.x+divStart.x;

  var t=oEvent.clientY-mouseStart.y+divStart.y;

  if(l<0)

  {

   l=0;

  }

  else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth)

  {

   l=document.documentElement.clientWidth-oDiv2.offsetWidth;

  }

  if(t<0)

  {

   t=0;

  }

  else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight)

  {

   t=document.documentElement.clientHeight-oDiv2.offsetHeight;

  }

  oDiv2.style.left=l+"px";

  oDiv2.style.top=t+"px";

 };

 function stopDrag3()

 {

  if(h2.releaseCapture)

  {

   h2.onmousemove=null;

   h2.onmouseup=null;

   h2.releaseCapture();

  }

  else

  {

   document.removeEventListener("mousemove",doDrag3,true);

   document.removeEventListener("mouseup",stopDrag3,true);

  }

  

  zhezhao.style.display='none';

 }

};

</script>

</head>

<body>

<div id="div2">

 <div style="width:100%; height:100%; overflow:hidden;">

 <h2>完美的拖拽</h2>

 <p>体验不错的JavaScript网页拖动，除了拖动，还可拖动放大，像Windows窗口一样被放大或缩小，只要按住层的右下角，就可以收放自如的放大或缩小。想使用的朋友，可将代码里的Js封装成类，从外部引入想必更合理些。'</p>

 <div id="right"></div>

 <div id="div1">拖</div>

 <div id="bottom"></div>

 </div>

</div>

<div id="zhezhao"></div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Js可拖拽放大的层拖动特效实现方法

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
vue生命周期实例小结
Aug 15 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
JS实现自适应高度表单文本框的方法
Feb 25 #Javascript
如何编写高质量JS代码(续)
Feb 25 #Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 #Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 #Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 #Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 #Javascript
JS给超链接加确认对话框的方法
Feb 24 #Javascript
封装(1) Master(1) PyAutoGUI(1) 百度地图(1) transaction(1) variables(1) Slave(1) 主从复制(1) ESXI(1) 表约束(2)
You might like
PHP中GET变量的使用
2006/10/09 PHP
PHP 上传文件大小限制
2009/07/05 PHP
php curl选项列表(超详细)
2013/07/01 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php include类文件超时问题处理
2015/02/06 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
教你如何用Node实现API的转发（某音乐）
2019/09/20 Javascript
Python高效编程技巧
2013/01/07 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
html5清空画布方法（三种）
2017/10/16 HTML / CSS
网络艺术零售业的先驱者：artrepublic
2017/09/26 全球购物
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
工商局调档介绍信
2015/10/22 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers