首页
所有分类
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 radio 联动效果
Mar 04 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
前端深入理解Typescript泛型概念
Mar 09 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) 电台频率(32) 短波(8) 怀旧期刊(1) Harman Kardon(1) 无线电(12) 收音机(62) 长波(3) 广播(8) 保养(1)
You might like
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
extjs 的权限问题 要求控制的对象是 菜单，按钮，URL
2010/03/09 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
纯js实现动态时间显示
2020/09/07 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
python创建进程fork用法
2015/06/04 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
StubHub新西兰：购买和出售你的门票
2019/04/22 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
违章停车检讨书
2014/10/21 职场文书
小学师德师风整改措施
2014/10/27 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
世界十大动漫制作公司排行榜，迪士尼上榜，第二是美国代表性文化符
2022/03/18 欧美动漫