带阴影的可拖动的浮动层

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >  
< html >  
< head >  
< title > MyPixbot </ title >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=iso-8859-1" >  
< script  language ="JavaScript"  type ="text/JavaScript" >  
<!--  
function  MM_reloadPage(init) {   // reloads the window if Nav4 resized 
   if  (init == true )  with  (navigator) { if  ((appName == " Netscape " )  &&  (parseInt(appVersion) == 4 )) { 
    document.MM_pgW = innerWidth; document.MM_pgH = innerHeight; onresize = MM_reloadPage; }} 
   else   if  (innerWidth != document.MM_pgW  ||  innerHeight != document.MM_pgH) location.reload(); 
} 
MM_reloadPage( true ); 

function  MM_findObj(n, d) {  // v4.01 
   var  p,i,x;   if ( ! d) d = document;  if ((p = n.indexOf( " ? " )) > 0   &&  parent.frames.length) { 
    d = parent.frames[n.substring(p + 1 )].document; n = n.substring( 0 ,p);} 
   if ( ! (x = d[n])  &&  d.all) x = d.all[n];  for  (i = 0 ; ! x  &&  i < d.forms.length;i ++ ) x = d.forms[i][n]; 
   for (i = 0 ; ! x  &&  d.layers  &&  i < d.layers.length;i ++ ) x = MM_findObj(n,d.layers[i].document); 
   if ( ! x   &&   d.getElementById) x = d.getElementById(n);  return  x; 
} 

function  MM_showHideLayers() {  // v6.0 
   var  i,p,v,obj,args = MM_showHideLayers.arguments; 
   for  (i = 0 ; i < (args.length - 2 ); i += 3 )  if  ((obj = MM_findObj(args[i])) != null ) { v = args[i + 2 ]; 
     if  (obj.style) { obj = obj.style; v = (v == ' show ' ) ? ' visible ' :(v == ' hide ' ) ? ' hidden ' :v; } 
    obj.visibility = v; } 
} 

function  MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) {  // v4.01 
   // Copyright 1998 Macromedia, Inc. All rights reserved. 
   var  i,j,aLayer,retVal,curDrag = null ,curLeft,curTop,IE = document.all,NS4 = document.layers; 
   var  NS6 = ( ! IE  &&  document.getElementById), NS = (NS4 || NS6);  if  ( ! IE   &&    ! NS)  return   false ; 
  retVal  =   true ;  if (IE   &&   event) event.returnValue  =   true ; 
   if  (MM_dragLayer.arguments.length  >   1 ) { 
    curDrag  =  MM_findObj(objName);  if  ( ! curDrag)  return   false ; 
     if  ( ! document.allLayers) { document.allLayers  =   new  Array(); 
       with  (document)  if  (NS4) {  for  (i = 0 ; i < layers.length; i ++ ) allLayers[i] = layers[i]; 
         for  (i = 0 ; i < allLayers.length; i ++ )  if  (allLayers[i].document   &&   allLayers[i].document.layers) 
           with  (allLayers[i].document)  for  (j = 0 ; j < layers.length; j ++ ) allLayers[allLayers.length] = layers[j]; 
      }  else  { 
         if  (NS6) {  var  spns  =  getElementsByTagName( " span " );  var  all  =  getElementsByTagName( " div " );  
           for  (i = 0 ;i < spns.length;i ++ )  if  (spns[i].style  &&  spns[i].style.position) allLayers[allLayers.length] = spns[i];} 
         for  (i = 0 ;i < all.length;i ++ )  if  (all[i].style  &&  all[i].style.position) allLayers[allLayers.length] = all[i];  
    } } 
    curDrag.MM_dragOk = true ; curDrag.MM_targL = targL; curDrag.MM_targT = targT; 
    curDrag.MM_tol = Math.pow(tol, 2 ); curDrag.MM_hLeft = hL; curDrag.MM_hTop = hT; 
    curDrag.MM_hWidth = hW; curDrag.MM_hHeight = hH; curDrag.MM_toFront = toFront; 
    curDrag.MM_dropBack = dropBack; curDrag.MM_dropJS = dropJS; 
    curDrag.MM_everyTime = et; curDrag.MM_dragJS = dragJS; 
    curDrag.MM_oldZ  =  (NS4) ? curDrag.zIndex:curDrag.style.zIndex; 
    curLeft =  (NS4) ? curDrag.left:(NS6) ? parseInt(curDrag.style.left):curDrag.style.pixelLeft;  
     if  (String(curLeft) == " NaN " ) curLeft = 0 ; curDrag.MM_startL  =  curLeft; 
    curTop  =  (NS4) ? curDrag.top:(NS6) ? parseInt(curDrag.style.top):curDrag.style.pixelTop;  
     if  (String(curTop) == " NaN " ) curTop = 0 ; curDrag.MM_startT  =  curTop; 
    curDrag.MM_bL = (cL < 0 ) ? null :curLeft - cL; curDrag.MM_bT = (cU < 0 ) ? null :curTop - cU; 
    curDrag.MM_bR = (cR < 0 ) ? null :curLeft + cR; curDrag.MM_bB = (cD < 0 ) ? null :curTop + cD; 
    curDrag.MM_LEFTRIGHT = 0 ; curDrag.MM_UPDOWN = 0 ; curDrag.MM_SNAPPED = false ;  // use in your JS! 
    document.onmousedown  =  MM_dragLayer; document.onmouseup  =  MM_dragLayer; 
     if  (NS) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP); 
  }  else  { 
     var  theEvent  =  ((NS) ? objName.type:event.type); 
     if  (theEvent  ==   ' mousedown ' ) { 
       var  mouseX  =  (NS) ? objName.pageX : event.clientX  +  document.body.scrollLeft; 
       var  mouseY  =  (NS) ? objName.pageY : event.clientY  +  document.body.scrollTop; 
       var  maxDragZ = null ; document.MM_maxZ  =   0 ; 
       for  (i = 0 ; i < document.allLayers.length; i ++ ) { aLayer  =  document.allLayers[i]; 
         var  aLayerZ  =  (NS4) ? aLayer.zIndex:parseInt(aLayer.style.zIndex); 
         if  (aLayerZ  >  document.MM_maxZ) document.MM_maxZ  =  aLayerZ; 
         var  isVisible  =  (((NS4) ? aLayer.visibility:aLayer.style.visibility).indexOf( ' hid ' )  ==   - 1 ); 
         if  (aLayer.MM_dragOk  !=   null    &&   isVisible)  with  (aLayer) { 
           var  parentL = 0 ;  var  parentT = 0 ; 
           if  (NS6) { parentLayer  =  aLayer.parentNode; 
             while  (parentLayer  !=   null    &&   parentLayer.style.position) {              
              parentL  +=  parseInt(parentLayer.offsetLeft); parentT  +=  parseInt(parentLayer.offsetTop); 
              parentLayer  =  parentLayer.parentNode; 
          } }  else   if  (IE) { parentLayer  =  aLayer.parentElement;        
             while  (parentLayer  !=   null    &&   parentLayer.style.position) { 
              parentL  +=  parentLayer.offsetLeft; parentT  +=  parentLayer.offsetTop; 
              parentLayer  =  parentLayer.parentElement; } } 
           var  tmpX = mouseX - (((NS4) ? pageX:((NS6) ? parseInt(style.left):style.pixelLeft) + parentL) + MM_hLeft); 
           var  tmpY = mouseY - (((NS4) ? pageY:((NS6) ? parseInt(style.top):style.pixelTop)  + parentT) + MM_hTop); 
           if  (String(tmpX) == " NaN " ) tmpX = 0 ;  if  (String(tmpY) == " NaN " ) tmpY = 0 ; 
           var  tmpW  =  MM_hWidth;   if  (tmpW  <=   0 ) tmpW  +=  ((NS4) ? clip.width :offsetWidth); 
           var  tmpH  =  MM_hHeight;  if  (tmpH  <=   0 ) tmpH  +=  ((NS4) ? clip.height:offsetHeight); 
           if  (( 0   <=  tmpX   &&   tmpX  <  tmpW   &&    0   <=  tmpY   &&   tmpY  <  tmpH)   &&   (maxDragZ  ==   null  
               ||  maxDragZ  <=  aLayerZ)) { curDrag  =  aLayer; maxDragZ  =  aLayerZ; } } } 
       if  (curDrag) { 
        document.onmousemove  =  MM_dragLayer;  if  (NS4) document.captureEvents(Event.MOUSEMOVE); 
        curLeft  =  (NS4) ? curDrag.left:(NS6) ? parseInt(curDrag.style.left):curDrag.style.pixelLeft; 
        curTop  =  (NS4) ? curDrag.top:(NS6) ? parseInt(curDrag.style.top):curDrag.style.pixelTop; 
         if  (String(curLeft) == " NaN " ) curLeft = 0 ;  if  (String(curTop) == " NaN " ) curTop = 0 ; 
        MM_oldX  =  mouseX  -  curLeft; MM_oldY  =  mouseY  -  curTop; 
        document.MM_curDrag  =  curDrag;  curDrag.MM_SNAPPED = false ; 
         if (curDrag.MM_toFront) { 
          eval( ' curDrag. ' + ((NS4) ? '' : ' style. ' ) + ' zIndex=document.MM_maxZ+1 ' ); 
           if  ( ! curDrag.MM_dropBack) document.MM_maxZ ++ ; } 
        retVal  =   false ;  if ( ! NS4  &&   ! NS6) event.returnValue  =   false ; 
    } }  else   if  (theEvent  ==   ' mousemove ' ) { 
       if  (document.MM_curDrag)  with  (document.MM_curDrag) { 
         var  mouseX  =  (NS) ? objName.pageX : event.clientX  +  document.body.scrollLeft; 
         var  mouseY  =  (NS) ? objName.pageY : event.clientY  +  document.body.scrollTop; 
        newLeft  =  mouseX - MM_oldX; newTop   =  mouseY - MM_oldY; 
         if  (MM_bL != null ) newLeft  =  Math.max(newLeft,MM_bL); 
         if  (MM_bR != null ) newLeft  =  Math.min(newLeft,MM_bR); 
         if  (MM_bT != null ) newTop   =  Math.max(newTop ,MM_bT); 
         if  (MM_bB != null ) newTop   =  Math.min(newTop ,MM_bB); 
        MM_LEFTRIGHT  =  newLeft - MM_startL; MM_UPDOWN  =  newTop - MM_startT; 
         if  (NS4) {left  =  newLeft; top  =  newTop;} 
         else   if  (NS6){style.left  =  newLeft; style.top  =  newTop;} 
         else  {style.pixelLeft  =  newLeft; style.pixelTop  =  newTop;} 
         if  (MM_dragJS) eval(MM_dragJS); 
        retVal  =   false ;  if ( ! NS) event.returnValue  =   false ; 
    } }  else   if  (theEvent  ==   ' mouseup ' ) { 
      document.onmousemove  =   null ; 
       if  (NS) document.releaseEvents(Event.MOUSEMOVE); 
       if  (NS) document.captureEvents(Event.MOUSEDOWN);  // for mac NS 
       if  (document.MM_curDrag)  with  (document.MM_curDrag) { 
         if  ( typeof  MM_targL  == ' number '    &&    typeof  MM_targT  ==   ' number '    &&   
            (Math.pow(MM_targL - ((NS4) ? left:(NS6) ? parseInt(style.left):style.pixelLeft), 2 ) +  
             Math.pow(MM_targT - ((NS4) ? top:(NS6) ? parseInt(style.top):style.pixelTop), 2 )) <= MM_tol) { 
           if  (NS4) {left  =  MM_targL; top  =  MM_targT;} 
           else   if  (NS6) {style.left  =  MM_targL; style.top  =  MM_targT;} 
           else  {style.pixelLeft  =  MM_targL; style.pixelTop  =  MM_targT;} 
          MM_SNAPPED  =   true ; MM_LEFTRIGHT  =  MM_startL - MM_targL; MM_UPDOWN  =  MM_startT - MM_targT; } 
         if  (MM_everyTime  ||  MM_SNAPPED) eval(MM_dropJS); 
         if (MM_dropBack) { if  (NS4) zIndex  =  MM_oldZ;  else  style.zIndex  =  MM_oldZ;} 
        retVal  =   false ;  if ( ! NS) event.returnValue  =   false ; } 
      document.MM_curDrag  =   null ; 
    } 
     if  (NS) document.routeEvent(objName); 
  }  return  retVal; 
} 

function  loadwin(obj){ 
     with (MM_findObj(obj)) with (style){ 
        filters[ 0 ].apply(); 
        display = '' ; 
        filters[ 0 ].play(); 
    } 
} 
function  cs(captionBG,bodyBG,tableBG){ 
oldBody = document.body; 
     with (oldBody){ 
         var  newBody = cloneNode(); 
        style.filter = ' blendtrans(duration=1) ' ; 
        filters[ 0 ].apply(); 
         with (document.styleSheets[ 0 ]){ 
             with (rules[ 0 ].style){backgroundColor = captionBG;} 
             with (rules[ 1 ].style){backgroundColor = bodyBG;} 
             with (rules[ 2 ].style){backgroundColor = tableBG} 
        } 
        filters[ 0 ].play(); 
        setTimeout( function (){ 
                 if (oldBody != null ){ 
                    oldBody.applyElement(newBody,  " inside " ) 
                    oldBody.swapNode(newBody); 
                    oldBody.removeNode( true ); 
                    } 
                }, 1500 ); 
    } 
} 
// --> 
</ script >  
< style  type ="text/css" >  
<!-- 
.caption  {  
    font-size :  9px ;  
    color :  #FFFFFF ;  
    background-color :  #00CCFF ;  
    padding-left :  5px ;  
    cursor :  default ;  
    font-family :  "Verdana", "Arial" ;  
    border :  1px inset ;  
}  
body  {  
    background-color :  #f6f6f6 ;  
    border :  1px inset ;  
    overflow :  hidden ;  
}  
table  {  
    background-color :  #eeeeee ;  
}  
td  {  
    font-family :  "Verdana", "Arial" ;  
    font-size :  9px ;  
    border :  0px ;  
}  
.win  {  
    filter : BlendTrans(duration=1) DropShadow(Color=#cccccc, OffX=3, OffY=3) alpha(opacity=90) 
}  
a  {  
    text-decoration :  none ;  
    color :  #003399 ;  
}  
a:hover  {  
    color :  #FF0000 ;  
}  
input  {  
    font-family :  "Verdana", "Arial" ;  
    font-size :  9px ;  
    border-width :  1px ;  
}  
.statusbar  {  
    font-family :  "Tahoma", "Verdana" ;  
    font-size :  9px ;  
    color :  #999999 ;  
    padding-left :  3px ;  
}  
.button  {  
    border :  1px outset ;  
    text-align :  center ;  
}  
.navframe  {  
    padding :  5px ;  
}  
--> 
</ style >  
</ head >  

< body >  
< div  id ="assist"  style ="position:absolute; left:15px; top:68px; width:185px; z-index:1;display:none;"  class ="win"  onMouseDown ="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')" >  
         < table  width ="180"  border ="1"  cellpadding ="0"  cellspacing ="0" >  
                 < tr >  
                         < td  class ="caption" > SeekAssist </ td >  
                         < td  width ="14"  align ="center" >< a  href ="#"  onclick ="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'" > % </ a ></ td >  
                         < td  width ="14"  align ="center" >< a  href ="#"  onClick ="MM_showHideLayers('assist','','hide')" > X </ a ></ td >  
                 </ tr >  
                 < tr  id ="assistwin" >  
                         < td  height ="100"  colspan ="3"  bordercolor ="#eeeeee" >   </ td >  
                 </ tr >  
   </ table >  
        
 
</ div >  
 
< div  id ="rank"  style ="position:absolute; left:15px; top:194px; width:185px; z-index:1;display:none;"  class ="win"  onMouseDown ="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')" >  
         < table  width ="180"  border ="1"  cellpadding ="0"  cellspacing ="0" >  
                 < tr >  
                         < td  class ="caption" > SeekRank </ td >  
                         < td  width ="14"  align ="center" >< a  href ="#"  onclick ="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'" > % </ a ></ td >  
                         < td  width ="14"  align ="center" >< a  href ="#"  onClick ="MM_showHideLayers('assist','','inherit','rank','','hide')" > X </ a ></ td >  
                 </ tr >  
                 < tr  id ="rankwin" >  
                         < td  height ="100"  colspan ="3"  bordercolor ="#eeeeee" >   </ td >  
                 </ tr >  
   </ table >  
        
 
</ div >  
 
< div  id ="mycolor"  style ="position:absolute; left:15px; top:320px; width:185px; z-index:1;display:none;"  class ="win"  onMouseDown ="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')" >  
         < table  width ="180"  border ="1"  cellpadding ="0"  cellspacing ="0" >  
                 < tr >  
                         < td  class ="caption" > MyColor </ td >  
                         < td  width ="14"  align ="center" >< a  href ="#"  onclick ="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'" > % </ a ></ td >  
                         < td  width ="14"  align ="center" >< a  href ="#"  onClick ="MM_showHideLayers('mycolor','','hide')" > X </ a ></ td >  
                 </ tr >  
                 < tr  id ="mycolorwin" >  
                         < td  height ="100"  colspan ="3"  bordercolor ="#eeeeee" >< table  width ="100%"  border ="0"  cellspacing ="0"  cellpadding ="2" >  
                                 < tr >  
                                         < td  align ="center" >< a  href ="#"  onclick ="cs('#00CCFF','#f6f6f6','#eeeeee')" > Default </ a ></ td >  
                                 </ tr >  
                                 < tr >  
                                         < td  align ="center" >< a  href ="#"  onclick ="cs('red','#eeccee','#eeddee')" > StyleSheet#1 </ a ></ td >  
                                 </ tr >  
                                 < tr >  
                                         < td  align ="center" >< a  href ="#"  onclick ="cs('#99ccff','#eeeeee','#ccddff')" > StyleSheet#2 </ a ></ td >  
                                 </ tr >  
                                 < tr >  
                                         < td  align ="center" >< a  href ="#"  onclick ="cs('#ff9999','#ffffff','#ffeeff')" > StyleSheet#3 </ a ></ td >  
                                 </ tr >  
                                 < tr >  
                                         < td  align ="center" >< a  href ="#"  onclick ="cs('skyblue','#eeeeee','#99ddff')" > StyleSheet#4 </ a ></ td >  
                                 </ tr >  
                                 < tr >  
                                         < td  align ="center" >< a  href ="#"  onclick ="cs('#009900','#eeffee','#ddffdd')" > StyleSheet#5 </ a ></ td >  
                                 </ tr >  
                         </ table ></ td >  
                 </ tr >  
   </ table >  
        
 
</ div >  
 
< div  id ="results"  style ="position:absolute; left:204px; top:68px; width:575px; z-index:1;display:none;"  class ="win"  onMouseDown ="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')" >  
         < table  width ="570"  border ="1"  cellpadding ="0"  cellspacing ="0" >  
                 < tr >  
                         < td >< table  width ="100%"  border ="0"  cellspacing ="0"  cellpadding ="0" >  
                                         < tr >  
                                                 < td  class ="caption" > Results </ td >  
                                                 < td  width ="12"  class ="button" >< a  href ="#"  onClick ="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'" > % </ a ></ td >  
                                                 < td  width ="12"  class ="button" >< a  href ="#"  onClick ="MM_showHideLayers('results','','inherit')" > X </ a ></ td >  
                                         </ tr >  
                         </ table ></ td >  
                 </ tr >  
                 < tr >  
                         < td  height ="20"  bordercolor ="#eeeeee" >< input  name ="url"  type ="text"  value ="http://www.google.com/search?q=ezlee"  size ="100" >  
                         < a  href ="#"  onclick ="mainframe.location=url.value" > Search </ a ></ td >  
                 </ tr >  
                 < tr  id ="resultswin" >  
                         < td  height ="318"  valign ="top"  class ="navframe" >< aiframe  name ="mainframe"  id ="mainframe"  src ="http://www.google.com/search?q=ezlee"  width ="100%"  height ="100%"  frameborder ="0"  scrolling ="auto" >< font  color ="#FF0000" > Welcome! </ aiframe ></ td >  
                 </ tr >  
                 < tr >  
                         < td  height ="14"  class ="statusbar" > Ready! </ td >  
                 </ tr >  
   </ table >  
        
 
</ div >  
 
</ body >  
</ html >