符合web标准的可拖动层特效

最新推荐文章于 2025-07-07 23:27:23 发布
happymagic
最新推荐文章于 2025-07-07 23:27:23 发布
阅读量880
点赞数
分类专栏： ASP.NET
ASP.NET 专栏收录该内容
82 篇文章
订阅专栏
本文介绍了一种符合Web标准的可拖动层特效实现方案，通过JavaScript编程实现了窗口的创建、拖动、最大化、最小化及关闭等功能，并提供了详细的代码示例。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
http://blog.youkuaiyun.com/wonsoft/article/details/5743841
[xhtml]view plaincopy 
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
 <HTML>  
 <HEAD>  
 <TITLE> 符合web标准的可拖动层特效</TITLE>  
 <meta content="text/html;charset=gb2312" http-equiv="content-type">  
 <mce:style><!-- 
 *{font-size:9pt;font-family:宋体;line-height:130%;} 
 --></mce:style><style mce_bogus="1">*{font-size:9pt;font-family:宋体;line-height:130%;}</style>  
 </HEAD>  
 <BODY>  
 <SCRIPT LANGUAGE="JavaScript">  
 <!--  
 Global = new Object();  
 Global.__UniqueID = 0;  
 Global.GetUniqueID = function(){ return "__MT_UID_" + Global.__UniqueID ++;};  
 function Dialog(title,icon,body){  
  this.Icon = icon || "http://www.jsgod.net/test/images/window_blur.gif";  
  this.Title = title || "Untitled Document";  
  this.Body = body || "Blank Document";  
  this.UniqueID = Global.GetUniqueID();  
  //////////////////////////////////////  
  this.Width = 400;  
  this._mousedown = false;  
  this._offsetX = 0;  
  this._offsetY = 0;  
  this._x = 0;  
  this._y = 0;  
  var i,l;  
  //////////////////////////////////////  
  this.SetRect = function(_width,_top,_left){  
   var obj;  
   if(_width > 200) this.Width = _width;  
   this._x = _left;  
   this._y = _top;  
   obj = document.getElementById(this.UniqueID);  
   if(obj){  
    obj.style.width = this.Width;  
    obj.style.top = _top;  
    obj.style.left = _left;  
   }  
  }  
  this.SetIndex = function(index){  
   if(isNaN(index)) return;  
   var obj = document.getElementById(this.UniqueID);  
   if(obj) obj.style.zIndex = index;  
  }  
  this.BindEvent = function(){  
   var self = this,obj = null;  
   var table = document.getElementById(this.UniqueID);  
   if((null == table)||(table.tagName != "TABLE")) return;  
   if(table.rows && table.rows[0].cells && table.rows[0].cells[0] && table.rows[0].cells[0].firstChild){  
    obj = table.rows[0].cells[0].firstChild;  
    obj.rows[0].cells[2].lastChild.onclick = function(e){  
     var obj = document.getElementById(self.UniqueID);  
     if(obj) obj.parentNode.removeChild(obj);  
    }  
    obj.rows[0].cells[2].firstChild.onclick = function(e){  
     e = window.event || e;  
     var obj = document.getElementById(self.UniqueID);  
     if(obj && obj.rows && obj.rows.length){  
      with(obj.rows[1].style){  
       display = display == "" ? "none" : "";  
      }  
     }  
     obj = (e.target || e.srcElement);  
     if(obj.on == "true"){  
      obj.on = "false";  
      obj.src = "http://www.jsgod.net/test/images/min.gif";  
     }  
     else{  
      obj.on = "true";  
      obj.src = "http://www.jsgod.net/test/images/max.gif";  
     }  
    }  
    if(obj.rows && obj.rows[0].cells && obj.rows[0].cells[0].firstChild) obj = obj.rows[0].cells[0].firstChild;  
    obj.onmousedown = function(e){  
     e = window.event || e;  
     if(e.cancelBubble) e.cancelBubble();  
     //Firefox....  
    };  
    obj.ondblclick = function(){ self.Close();};  
    table.onmousedown = function(){  
     var obj;  
     if(Dialog.ObjectRef && (this != Dialog.ObjectRef)){  
      obj = document.getElementById(Dialog.ObjectRef.UniqueID);  
      if(obj){  
       obj.style.borderColor = "#cccccc";  
       obj.style.zIndex = 90;  
       obj.rows[0].cells[0].firstChild.rows[0].cells[0].firstChild.src = "images/window_blur.gif";  
      }  
     }  
     obj = document.getElementById(self.UniqueID);  
     if(obj){  
      obj.style.borderColor = "lightblue";  
      obj.style.zIndex = 99;  
      obj.rows[0].cells[0].firstChild.rows[0].cells[0].firstChild.src = "images/window.gif";  
     }  
     Dialog.ObjectRef = self;  
    }  
   }  
   if(table.rows){  
    table.rows[0].cells[0].firstChild.rows[0].cells[1].onmousedown = function(e){  
     var obj;  
     e = window.event || e;  
     self._dragable = true;  
     obj = document.getElementById(self.UniqueID);  
     if(null == obj) return;  
     self._x = e.clientX;  
     self._y = e.clientY;  
     self._offsetX = parseInt(obj.style.left);  
     self._offsetY = parseInt(obj.style.top);  
    }  
    table.onmouseover = function(e){  
     e = window.event || e;  
     var obj = document.getElementById(self.UniqueID);  
     if(obj) obj.style.cursor = "default";  
       
    };  
    table.onmouseup = function(e){  
     var obj;  
     e = window.event || e;  
     self._dragable = false;  
     obj = document.getElementById(self.UniqueID);  
     if(obj) obj.style.cursor = "default";  
    }  
    table.rows[0].ondblclick = function(e){  
     obj = document.getElementById(self.UniqueID);  
     if(null == obj) return;  
     if(obj.rows && (obj.rows.length > 1)){  
      with(obj.rows[1].style){  
       display = display == "" ? "none" : "";  
       obj = obj.rows[0].cells[0].firstChild.rows[0].cells[2].firstChild;  
       obj.src = obj.on == "true" ? "http://www.jsgod.net/test/images/min.gif" : "http://www.jsgod.net/test/images/max.gif";  
       obj.on = obj.on == "true" ? "false" : "true";  
      };  
     }  
    }  
   }  
  }  
  this.Close = function(){  
   var table = document.getElementById(this.UniqueID);  
   if(table) table.parentNode.removeChild(table);  
  }  
  this.toString = function(){  
   var shtml = '';  
   shtml += '<table cellpadding="0" cellspacing="0" border="1" onselectstart="return false;" oncontextmenu="return false;" ondragstart="return false;" bgcolor="#ffffff" id="' + this.UniqueID + '" style="border:solid 1px #cccccc;cursor:default;width:' + (this.Width) + 'px;position:absolute;top:' + this._y + 'px;left:' + this._x + 'px;">';  
   shtml += '<tr height="20"><td style="border:0px;" mce_style="border:0px;"><table cellpadding="5" cellspacing="0" border="0" width="100%"><tr><td width="20"><img src="' + this.Icon + '" mce_src="' + this.Icon + '" width="16" height="16"/></td><td align="left"><span style="width:200px;overflow:hidden;" title="' + this.Title + '">' + this.Title + '</span></td><td width="32"><img src="http://www.jsgod.net/test/images/min.gif" mce_src="http://www.jsgod.net/test/images/min.gif" height="13" width="13" title="最小化" on="false" hspace="1" onmouseover="style.borderColor=/'lightblue/'" style="border:solid 1px #ffffff" mce_style="border:solid 1px #ffffff" onmouseout="style.borderColor=/'#ffffff/'"/><img src="http://www.jsgod.net/test/images/close.gif" mce_src="http://www.jsgod.net/test/images/close.gif" width="13" height="13" title="关闭" style="border:solid 1px #ffffff;" mce_style="border:solid 1px #ffffff;" onmouseover="style.borderColor=/'lightblue/'" onmouseout="style.borderColor=/'#ffffff/'"/></td></tr>';  
   shtml += '</table></td></tr>';  
   shtml += '<tr style="display:;" mce_style="display:;"><td style="border:0px;padding:5px;border-top:solid 1px #cccccc;" mce_style="border:0px;padding:5px;border-top:solid 1px #cccccc;" valign="top">' + this.Body + '</td></tr>';  
   shtml += '</table>';  
   return shtml;  
  }  
 }  
 document.onmousemove = function(e){  
  var _x,_y,obj;  
  e = window.event || e;  
  if(null == Dialog.ObjectRef) return;  
  obj = document.getElementById(Dialog.ObjectRef.UniqueID);  
  if(null == obj) return;  
  if(Dialog.ObjectRef._dragable){  
   obj.style.top = Dialog.ObjectRef._offsetY + e.clientY - Dialog.ObjectRef._y;  
   obj.style.left = Dialog.ObjectRef._offsetX + e.clientX - Dialog.ObjectRef._x;  
   obj.style.cursor = "move";  
  }  
 }  
 Dialog.ObjectRef = null;  
 var dialog = new Dialog("哇哈哈",null,"Matrixy Herry");  
 document.write(dialog);  
 dialog.BindEvent();  
 dialog.SetIndex(1);  
 dialog.SetRect(400,100,200);  
 var dialog1 = new Dialog("偶来试试",null,'<img src="" width="300" height="200"/>');  
 document.write(dialog1);  
 dialog1.BindEvent();  
 dialog1.SetIndex(2);  
 dialog1.SetRect(350,100,250);  
 var dialog2 = new Dialog("Hello World");  
 document.write(dialog2);  
 dialog2.BindEvent();  
 dialog2.SetIndex(24);  
 dialog2.SetRect(380,10,20);  
 var dialog3 = new Dialog("4");  
 document.write(dialog3);  
 dialog3.BindEvent();  
 dialog3.SetRect(390,200,100);  
 var dialog4 = new Dialog("5");  
 document.write(dialog4);  
 dialog4.SetIndex(340);  
 dialog4.BindEvent();  
 //-->  
 </SCRIPT>  
 </BODY>  
 </HTML>  
调用方法：
以下是引用片段：
var dialog1 = new Dialog("偶来试试",null,’<img src="" width="300" height="200"/>’);
document.write(dialog1);
dialog1.BindEvent();
dialog1.SetIndex(2);
dialog1.SetRect(350,100,250);