純JS模仿Google個性化首頁2

<! 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" > &nbsp; </ td >

</ tr >

</ table >

< br >

</ div >

< script > loadwin('assist') </ script >

< 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" > &nbsp; </ td >

</ tr >

</ table >

< br >

</ div >

< script > setTimeout( " loadwin('rank') " , 500 ) </ script >

< 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 >

< br >

</ div >

< script > setTimeout( " loadwin('mycolor') " , 1000 ) </ script >

< 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! </ font ></ aiframe ></ td >

</ tr >

< tr >

< td  height ="14"  class ="statusbar" > Ready! </ td >

</ tr >

</ table >

< br >

</ div >

< script > setTimeout( " loadwin('results') " , 2000 ) </ script >

</ body >

</ html >