首页
所有分类
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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
suggestion开发小结以及对键盘事件的总结（针对中文输入法状态）
Dec 20 Javascript
js汉字排序问题 支持中英文混排，兼容各浏览器，包括CHROME
Dec 20 Javascript
Javascript玩转继承（三）
May 08 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站（两种方式）
Aug 04 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
node.js中express-session配置项详解
May 31 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
form表单序列化详解（推荐）
Aug 15 Javascript
webpack写jquery插件的环境配置
Dec 21 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) PL550(1) 乐信(1) RP2100(1) ICF-SW07(1) BCL3000(2) H-501(1) ICF-SW7600(1) PL450(1) PL990(2)
You might like
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
php远程下载类分享
2016/04/13 PHP
zend framework重定向方法小结
2016/05/28 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
syntaxhighlighter 使用方法
2007/07/02 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
微信小程序实现留言板（Storage）
2018/11/02 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
python 实现性别识别
2020/11/21 Python
python温度转换华氏温度实现代码
2020/12/06 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
资产评估专业学生的自我鉴定
2013/11/14 职场文书
安全生产检讨书
2014/01/21 职场文书
酒店管理求职信范文
2014/04/06 职场文书
企业承诺书怎么写
2014/05/24 职场文书
解析MySQL索引的作用
2022/03/03 MySQL