首页
所有分类
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 相关文章推荐
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
js实现文本框选中的方法
May 26 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
Node.js Buffer用法解读
May 18 Javascript
vue.js实现会动的简历(包含底部导航功能，编辑功能)
Apr 08 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
解析原生JS getComputedStyle
May 25 Javascript
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) LW(1) 电路图(1) SW(1) SWL(1) 短波(1) FM(4) 电台(1) 发报机(1) 调幅(1)
You might like
如何从一个php文件向另一个地址post数据，不用表单和隐藏的变量的
2007/03/06 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
angularJS结合canvas画图例子
2015/02/09 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
更靠谱的H5横竖屏检测方法（js代码）
2016/09/13 Javascript
js转html实体的方法
2016/09/27 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
Python上下文管理器和with块详解
2017/09/09 Python
浅析python的优势和不足之处
2018/11/20 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
Clarks鞋澳大利亚官方网站：Clarks Australia
2019/12/25 全球购物
数据库基础的一些面试题
2012/02/25 面试题
优秀党支部事迹材料
2014/01/14 职场文书
幼儿教师国培感言
2014/02/19 职场文书
小学生植树节活动总结
2014/07/04 职场文书
企业法人代表证明书
2014/09/27 职场文书
环境卫生标语
2015/08/03 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
画错魏国疆域啦！《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫