这篇文章主要介绍了 Js 可拖拽放大的层拖动特效实现方法, 涉及 javascript 操作 DOM 元素及 css 样式的技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 程序设计有所帮助。
来源: