窗口拖动支持最小化_关闭_半透明阴影_焦点颜色

保存成html文件即可，代码：

< html >
< head >
< title > _xWin </ title >
< style  type ='text/css' >
<!--
a:visited { text-decoration : none ; color : slategray ; }
a:hover { text-decoration : underline ; color : slategray ; }
a:link { text-decoration : none ; color : slategray ; }
-->
</ style >
< script  language =JScript >
<!--
// 可以打包为js文件;
var  x0 = 0 ,y0 = 0 ,x1 = 0 ,y1 = 0 ;
var  offx = 6 ,offy = 6 ;
var  moveable = false ;
var  hover = ' orange ' ,normal = ' slategray ' ; // color;
var  index = 10000 ; // z-index;
// 开始拖动;
function  startDrag(obj)
{
if (event.button == 1 )
{
     // 锁定标题栏;
    obj.setCapture();
     // 定义对象;
     var  win  =  obj.parentNode;
     var  sha  =  win.nextSibling;
     // 记录鼠标和层位置;
    x0  =  event.clientX;
    y0  =  event.clientY;
    x1  =  parseInt(win.style.left);
    y1  =  parseInt(win.style.top);
     // 记录颜色;
    normal  =  obj.style.backgroundColor;
     // 改变风格;
    obj.style.backgroundColor  =  hover;
    win.style.borderColor  =  hover;
    obj.nextSibling.style.color  =  hover;
    sha.style.left  =  x1  +  offx;
    sha.style.top     =  y1  +  offy;
    moveable  =   true ;
}
}
// 拖动;
function  drag(obj)
{
if (moveable)
{
     var  win  =  obj.parentNode;
     var  sha  =  win.nextSibling;
    win.style.left  =  x1  +  event.clientX  -  x0;
    win.style.top     =  y1  +  event.clientY  -  y0;
    sha.style.left  =  parseInt(win.style.left)  +  offx;
    sha.style.top     =  parseInt(win.style.top)  +  offy;
}
}
// 停止拖动;
function  stopDrag(obj)
{
if (moveable)
{
     var  win  =  obj.parentNode;
     var  sha  =  win.nextSibling;
     var  msg  =  obj.nextSibling;
    win.style.borderColor        =  normal;
    obj.style.backgroundColor  =  normal;
    msg.style.color              =  normal;
    sha.style.left  =  obj.parentNode.style.left;
    sha.style.top     =  obj.parentNode.style.top;
    obj.releaseCapture();
    moveable  =   false ;
}
}
// 获得焦点;
function  getFocus(obj)
{
if (obj.style.zIndex != index)
{
    index  =  index  +   2 ;
     var  idx  =  index;
    obj.style.zIndex = idx;
    obj.nextSibling.style.zIndex = idx - 1 ;
}
}
// 最小化;
function  min(obj)
{
var  win  =  obj.parentNode.parentNode;
var  sha  =  win.nextSibling;
var  tit  =  obj.parentNode;
var  msg  =  tit.nextSibling;
var  flg  =  msg.style.display == " none " ;
if (flg)
{
    win.style.height     =  parseInt(msg.style.height)  +  parseInt(tit.style.height)  +   2 * 2 ;
    sha.style.height     =  win.style.height;
    msg.style.display  =   " block " ;
    obj.innerHTML  =   " 0 " ;
}
else
{
    win.style.height     =  parseInt(tit.style.height)  +   2 * 2 ;
    sha.style.height     =  win.style.height;
    obj.innerHTML  =   " 2 " ;
    msg.style.display  =   " none " ;
}
}
// 关闭;
function  cls(obj)
{
var  win  =  obj.parentNode.parentNode;
var  sha  =  win.nextSibling;
win.style.visibility  =   " hidden " ;
sha.style.visibility  =   " hidden " ;
}
// 创建一个对象;
function  xWin(id,w,h,l,t,tit,msg)
{
index  =  index + 2 ;
this .id         =  id;
this .width      =  w;
this .height     =  h;
this .left       =  l;
this .top        =  t;
this .zIndex     =  index;
this .title      =  tit;
this .message  =  msg;
this .obj        =   null ;
this .bulid      =  bulid;
this .bulid();
}
// 初始化;
function  bulid()
{
var  str  =   ""
     +   " <div id=xMsg "   +   this .id  +   "   "
     +   " style=' "
     +   " z-index: "   +   this .zIndex  +   " ; "
     +   " width: "   +   this .width  +   " ; "
     +   " height: "   +   this .height  +   " ; "
     +   " left: "   +   this .left  +   " ; "
     +   " top: "   +   this .top  +   " ; "
     +   " background-color: "   +  normal  +   " ; "
     +   " color: "   +  normal  +   " ; "
     +   " font-size:10px; "
     +   " font-family:Verdana; "
     +   " position:absolute; "
     +   " cursor:default; "
     +   " border:2px solid  "   +  normal  +   " ; "
     +   " '  "
     +   " onmousedown='getFocus(this)'> "
      +   " <div  "
      +   " style=' "
      +   " background-color: "   +  normal  +   " ; "
      +   " width: "   +  ( this .width - 2 * 2 )  +   " ; "
      +   " height:20; "
      +   " color:white; "
      +   " '  "
      +   " onmousedown='startDrag(this)'  "
      +   " onmouseup='stopDrag(this)'  "
      +   " onmousemove='drag(this)'  "
      +   " ondblclick='min(this.childNodes[1])' "
      +   " > "
       +   " <span style='width: "   +  ( this .width - 2 * 12 - 4 )  +   " ;padding-left:3px;'> "   +   this .title  +   " </span> "
       +   " <span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span> "
       +   " <span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span> "
      +   " </div> "
       +   " <div style=' "
       +   " width:100%; "
       +   " height: "   +  ( this .height - 20 - 4 )  +   " ; "
       +   " background-color:white; "
       +   " line-height:14px; "
       +   " word-break:break-all; "
       +   " padding:3px; "
       +   " '> "   +   this .message  +   " </div> "
     +   " </div> "
     +   " <div style=' "
     +   " width: "   +   this .width  +   " ; "
     +   " height: "   +   this .height  +   " ; "
     +   " top: "   +   this .top  +   " ; "
     +   " left: "   +   this .left  +   " ; "
     +   " z-index: "   +  ( this .zIndex - 1 )  +   " ; "
     +   " position:absolute; "
     +   " background-color:black; "
     +   " filter:alpha(opacity=40); "
     +   " '>by wildwind</div> " ;
document.body.insertAdjacentHTML( " beforeEnd " ,str);
}
// -->
</ script >
< script  language ='JScript' >
<!--
function  initialize()
{
var  a  =   new  xWin( " 1 " , 160 , 200 , 200 , 200 , " 消息 " , " 消息标题 <br>测试消息体<br>2005-7-12 " );
var  b  =   new  xWin( " 2 " , 240 , 200 , 100 , 100 , " 对话框 " , " 一个很牛叉的窗口 " );
var  c  =   new  xWin( " 3 " , 200 , 160 , 250 , 50 , " 版权信息 " , " Copyright by <a href='http://hi.baidu.com/2427'>Mars.CN</a>! " );
var  d  =   new  xWin( " 4 " , 200 , 160 , 450 , 250 , " 中文测试 " , " 测试中文内容<br><a href='http://hi.baidu.com/2427' title='我的网站'>测试中文连接</a> " );
}
window.onload  =  initialize;
// -->
</ script >

< script  language ='JScript' >
function  addwin(){
var  x =   new  xWin( " 5 " , 200 , 160 , 550 , 150 , " 新窗口 " , " 新窗口内容 " );
}
</ script >
</ head >
< body  onselectstart ='return  false' oncontextmenu ='return  false' scroll ='no' >

</ body >
</ html >

< html >  
< head >  
< style >  
.button2 
{  
border-right : 1px solid buttonhighlight ;  
border-left : 1px solid buttonshadow ;  
border-bottom : 1px solid buttonhighlight ;  
border-top : 1px solid buttonshadow 
}  
TD 
{  
cursor :  hand ;  font-size :  9pt ;  font-family :  宋体 ;  text-align :  center ;  text-valign :  middle 
}  
.handin 
{  
height : 18px ;  
width : 2px ;  
border-left : 1px solid buttonshadow ;  
border-right : 1px solid buttonhighlight 
}  
.handout 
{  
height : 18px ;  
width : 2px ;  
border-left : 1px solid buttonhighlight ;  
border-right : 1px solid buttonshadow ;  
}  
.into 
{  
width : 100% ;  
border-right : 1px solid buttonhighlight ;  
border-left : 1px solid buttonshadow ;  
border-bottom : 1px solid buttonhighlight ;  
border-top : 1px solid buttonshadow 
}  
.outto,.button1 
{  
background-color :  buttonface ;  
background-repeat :  repeat ;  
background-attachment :  scroll ;  
border-left :  1px solid buttonhighlight ;  
border-right :  1px solid buttonshadow ;  
border-top :  1px solid buttonhighlight ;  
border-bottom :  1px solid buttonshadow ;  
background-position :  0%" 
}  
.button0 
{  
}  

</ style >  
</ head >  
< body  topmargin ="0"  leftmargin ="0"  bgcolor ="#E0E0E0" >  
< script >  
function  change_button(num) 
{ 
if (event.srcElement.tagName == " TD " && event.srcElement.value == " button " ) 
event.srcElement.className  =   " button " + num; 
} 
</ script >  
< div  class ="into"  style ="width: 100%; height: 25" >  
< table  class ="outto"  border ="0"  width ="100%"  height ="25"  cellspacing ="1"  onmouseover ="change_button(1)"  onmouseup ="change_button(0)"  onmousedown ="change_button(2)"  onmouseout ="change_button(0)" >  
< tr >  
< td  width ="1%"  height ="19" >< span  class ="handout" ></ span ></ td >  
< td  width ="9%"  height ="19"  value ="button"  title ="添加一个新窗口"  onclick ="addwin();" > 添加 </ td >  
< td  width ="1%"  height ="19" >< span  class ="handin" ></ span ></ td >  
< td  width ="9%"  height ="19"  value ="button" > 按钮TD </ td >  
< td  width ="1%"  height ="19" >< span  class ="handin" ></ span ></ td >  
< td  width ="9%"  height ="19"  value ="button" > 按钮TD </ td >  
< td  width ="1%"  height ="19" >< span  class ="handin" ></ span ></ td >  
< td  width ="69%"  height ="19" ></ td >  
</ tr >  
</ table >  

</ div >  
</ body >  
</ html >