2顶

带关闭功能的可拖动窗口

稿源：互联网 2022-04-02 21:40:51 点击： 3995 撤稿纠错

窗口可随意拖动效果，带关闭按钮，还能自由拉伸。

以下讨论的是和拖动相关的带关闭功能的可拖动窗口教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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=utf-8">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>网页特效 带关闭功能可拖动窗口 站长特效网</title>
<style type="text/css">
*{padding:0;margin:0;}
li{list-style:none;}
body{background:#eee;}
.drag_layer{width:450px;height:270px;border:1px solid #aaaaaa;padding:3px;position:absolute;top:0px;left:0px;background:#fff;overflow:hidden;}
.drag_layer h2{height:25px;line-height:25px;padding-left:10px;font-size:14px;color:#333;background:url(/img/title_bg_zzjs20101230.gif) repeat-x;border:1px solid #aaaaaa;cursor:move;position:relative;}
.drag_layer .close{width:21px;height:20px;background:url(/img/close_zzjs20101230.gif) no-repeat 0 bottom;position:absolute;top:2px;right:3px;}
.drag_layer .close:hover{background:url(/img/close_zzjs20101230.gif) no-repeat 0 0;}
.drag_layer .content{padding:10px;overflow:auto;}
.drag_layer .content p{font-size:12px;line-height:18px;color:#666;text-indent:28px;padding-bottom:10px;font-family:arial;}
.drag{width:14px;height:14px;overflow:hidden;background:url(/img/r_zzjs20101230.gif) no-repeat 1px 1px;cursor:nw-resize;position:absolute;top:262px;right:0;z-index:2;}
.bar_t{width:410px;height:4px;position:absolute;top:-2px;left:-2px;z-index:1;cursor:n-resize;overflow:hidden;}
.bar_b{width:410px;height:4px;position:absolute;bottom:-2px;left:-2px;z-index:1;cursor:n-resize;overflow:hidden;}
.bar_r{width:4px;height:110px;position:absolute;right:-2px;top:-2px;z-index:1;cursor:e-resize;}
.bar_l{width:4px;height:110px;position:absolute;left:-2px;top:-2px;z-index:1;cursor:e-resize;}
</style>
<script type="text/javascript">
var oMsgbox=null;
var g_orgTop=0;
var g_orgHeight=0;
var g_orgLeft=0;
var g_orgWidth=0;
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
var oContent=null;
var oDragBoth=null;
var oDragL=null;
var oDragT=null;
var oDragR=null;
var oDragB=null;
//欢迎来到站长特效网，我们的网址是ww..w.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
window.onload=function ()
{
 var oBtnClose=null;
 var oH2Title=null;
 var aDiv=null;
 var fnDrag=null;
 var i=0;
 oMsgbox=document.getElementById('www_zzjs_net');
 oBtnClose=oMsgbox.getElementsByTagName('a')[0];
 oH2Title=oMsgbox.getElementsByTagName('h2')[0];
 aDiv=oMsgbox.getElementsByTagName('div');
 oBtnClose.onmousedown=function ()
 {
  oMsgbox.style.display='none';
 };
 oMsgbox.style.left=(document.body.scrollLeft||document.documentElement.scrollLeft)+(document.documentElement.clientWidth-oMsgbox.offsetWidth)/2+'px';
 oMsgbox.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+(document.documentElement.clientHeight-oMsgbox.offsetHeight)/2+'px';
 new PerfectDraging
 (
  oH2Title,
  function ()
  {
   return {x:oMsgbox.offsetLeft, y:oMsgbox.offsetTop};
  },
  function (x, y)
  {
   var iSTop=document.body.scrollTop || document.documentElement.scrollTop;
   if(x<0)
   {
    x=0;
   }
   else if(x+oMsgbox.offsetWidth>document.documentElement.clientWidth)
   {
    x=document.body.clientWidth-oMsgbox.offsetWidth;
   }
   if(y<iSTop)
   {
    y=iSTop;
   }
   else if(y+oMsgbox.offsetHeight>document.documentElement.clientHeight+iSTop)
   {
    y=document.documentElement.clientHeight-oMsgbox.offsetHeight+iSTop;
   }
   oMsgbox.style.left=x+'px';
   oMsgbox.style.top=y+'px';
  }
 );
//欢迎来到站长特效网，我们的网址是www.zzjs.ne  t，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 for(i=0;i<aDiv.length;i++)
 {
  fnDrag=null;
  switch(aDiv[i].className)
  {
   case 'drag':
    fnDrag=doBothDrag;
    oDragBoth=aDiv[i];
    break;
   case 'bar_t':
    fnDrag=doTDrag;
    oDragT=aDiv[i];
    break;
   case 'bar_r':
    fnDrag=doRDrag;
    oDragR=aDiv[i];
    break;
   case 'bar_b':
    fnDrag=doBDrag;
    oDragB=aDiv[i];
    break;
   case 'bar_l':
    fnDrag=doLDrag;
    oDragL=aDiv[i];
    break;
   case 'content':
    oContent=aDiv[i];
    break;
  }
  if(!fnDrag)
  {
   continue;
  }
  new PerfectDraging
  (
   aDiv[i],
   function ()
   {
    g_orgTop=oMsgbox.offsetTop;
    g_orgHeight=oMsgbox.offsetHeight;
    g_orgLeft=oMsgbox.offsetLeft;
    g_orgWidth=oMsgbox.offsetWidth;
    return {x:oMsgbox.offsetWidth, y:oMsgbox.offsetHeight};
   },
   fnDrag
   /*function (x, y)
   {
    fnDrag(x, y);
   }*/
  );
 }
};
//欢迎来到站长特效网，我们的网址是www.zzjs.n et，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function doBothDrag(x, y)
{
 if(x<110)
 {
  x=110;
 }
 oMsgbox.style.width=x-8+'px';
 oDragT.style.width=x+'px';
 oDragB.style.width=x+'px';
 if(y<35)
 {
  y=35;
 }
 oMsgbox.style.height=y-8+'px';
 oDragL.style.height=y+'px';
 oDragR.style.height=y+'px';
 oDragBoth.style.top=y-16+'px';
}
//欢迎来到站长特效网，我们的网址是www.zz js.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function doTDrag(x, y)
{
 var h=2*g_orgHeight-y;
 if(h<35)
 {
  h=35;
 }
 oMsgbox.style.top=g_orgTop+g_orgHeight-h+'px';
 oMsgbox.style.height=h-8+'px';
 oDragL.style.height=h+2+'px';
 oDragR.style.height=h+2+'px';
 oDragBoth.style.top=h-16+'px';
}
//欢迎来到站长特效.网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function doRDrag(x, y)
{
 if(x<110)
 {
  x=110;
 }
 oMsgbox.style.width=x-8+'px';
 oDragT.style.width=x+2+'px';
 oDragB.style.width=x+2+'px';
}
//欢迎来到站长特效网，我们的网址是www.z zjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function doBDrag(x, y)
{
 if(y<35)
 {
  y=35;
 }
 oMsgbox.style.height=y-8+'px';
 oDragL.style.height=y+2+'px';
 oDragR.style.height=y+2+'px';
 oDragBoth.style.top=y-16+'px';
}
//欢迎来到站长特效网，我们的网址是ww w.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function doLDrag(x, y)
{
 var w=2*g_orgWidth-x;
 if(w<110)
 {
  w=110;
 }
 oMsgbox.style.left=g_orgLeft+g_orgWidth-w+'px';
 oMsgbox.style.width=w-8+'px';
 oDragT.style.width=w+2+'px';
 oDragB.style.width=w+2+'px';
}
//欢迎来到站.长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function PerfectDraging(oElement, fnGetPos, fnOnDrag)
{
 var obj=this;
 this.oElement=oElement;
 this.fnGetPos=fnGetPos;
 this.fnOnDrag=fnOnDrag;
 this.__oStartOffset__={x:0, y:0};
 this.fnOnMouseUp=function (ev)
 {
  obj.stopDrag(window.event || ev);
 };
 this.fnOnMouseMove=function (ev)
 {
  obj.doDrag(window.event || ev);
 };
 this.oElement.onmousedown=function (ev)
 {
  obj.startDrag(window.event || ev);
 };
}
//欢迎来到站长特效q网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
PerfectDraging.prototype.startDrag=function (oEvent)
{
 var oPos=this.fnGetPos();
 //var x=oEvent.pageX || oEvent.x;
 //var y=oEvent.pageY || oEvent.y;
 var x=oEvent.clientX;
 var y=oEvent.clientY;
 this.__oStartOffset__.x=x-oPos.x;
 this.__oStartOffset__.y=y-oPos.y;
 if(this.oElement.setCapture)
 {
  this.oElement.setCapture();
  this.oElement.onmouseup=this.fnOnMouseUp;
  this.oElement.onmousemove=this.fnOnMouseMove;
 }
 else
 {
  document.addEventListener("mouseup", this.fnOnMouseUp, true);
  document.addEventListener("mousemove", this.fnOnMouseMove, true);
  window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
 }
};
//欢迎来到站长特c效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
PerfectDraging.prototype.stopDrag=function (oEvent)
{
 if(this.oElement.releaseCapture)
 {
  this.oElement.releaseCapture();
  this.oElement.onmouseup=null;
  this.oElement.onmousemove=null;
 }
 else
 {
  document.removeEventListener("mouseup", this.fnOnMouseUp, true);
  document.removeEventListener("mousemove", this.fnOnMouseMove, true);
  window.releaseEvents(Event.MOUSE_MOVE | Event.MOUSE_UP);
 }
};
//欢迎来到站长特x效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
PerfectDraging.prototype.doDrag=function (oEvent)
{
 //var x=oEvent.pageX || oEvent.x;
 //var y=oEvent.pageY || oEvent.y;
 var x=oEvent.clientX;
 var y=oEvent.clientY;
 this.fnOnDrag(x-this.__oStartOffset__.x, y-this.__oStartOffset__.y);
};//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

<div style="height:2000px;"></div>
<div id="www_zzjs_net" class="drag_layer">
    <h2>
        <strong title="站长特效网 www.zzjs.net 一流网页特效站！">站长特效网 www.zzjs.net 一流网页特效站！</strong>
        <a href="#" class="close" title="关闭"></a>
    </h2>
    <div class="content">
  <p><a href="http://www.zzjs.net">站长特效网</a>，高质量网页特效代码，广告代码，js特效代码网站。以质量为核心，以实用为目的，打造一流网页特效站！</p>
 </div>
    <div class="drag"></div>
    <div class="bar_t"></div>
    <div class="bar_r"></div>
    <div class="bar_b"></div>
    <div class="bar_l"></div>
</div>
</body>
</html>

关于带关闭功能的可拖动窗口的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010123196620.shtml方便下次再访问哦。

·上一篇： 悬浮调查窗口定位显示效果
·下一篇： 右下角弹出留言框特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

带关闭功能的可拖动窗口

文章分类LIST >>返回首页

最新游戏

最新新闻