首页
所有分类
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显示选择目录对话框的代码
Nov 10 Javascript
js继承 Base类的源码解析
Dec 30 Javascript
Javascript 汉字字节判断
Aug 01 Javascript
JavaScript 学习笔记（十四） 正则表达式
Jan 22 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
jquery validate.js表单验证入门实例（附源码）
Nov 10 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
React.js中常用的ES6写法总结（推荐）
May 09 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 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) V Rising(1) Navicat(1) 内置函数(1) Android Gradle(1) 记事本(1) maven(2) Spring Security(2) 动态权限(1) Kotlin(1)
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP图片上传代码
2013/11/04 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
jQuery each()小议
2010/03/18 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
理解JSON：3分钟课程
2011/10/28 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python re模块介绍
2014/11/30 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
python 读取.nii格式图像实例
2020/07/01 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
Rag & Bone官网：瑞格布恩高级成衣
2018/04/19 全球购物
美国领先的在线邮轮旅游公司：CruiseDirect
2018/06/07 全球购物
加拿大国民体育购物网站：National Sports
2018/11/04 全球购物
Servlet方面面试题
2016/09/28 面试题
思想汇报格式
2014/01/05 职场文书
小学教研工作制度
2014/01/15 职场文书
《花木兰》教学反思
2014/04/09 职场文书
工地标语大全
2014/06/18 职场文书
2014年建筑工作总结
2014/11/26 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
幼儿园辞职书
2015/02/26 职场文书
甲午大海战观后感
2015/06/02 职场文书
运动员代表致辞
2015/07/29 职场文书
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL