DHTML
Äâèæóùèåñÿ îáúåêòû Ïîäñâåòêà êíîïîê Âûïàäàþùèå ìåíþ Îæèäàíèå çàãðóçêè Drag'n'Drop Òèòðû Òåëåòàéï Ïîïàäè â ìåíÿ! Àíèìàöèÿ ActiveX Ïðîçðà÷íîñòü Ýôôåêòû çàãðóçêè Øëåéô Øòîðû JavaScript
English | Ãëàâíàÿ
Ïîëåçíûå ññûëêè:
|
<html> <head> <title>www.redmount.com - DHTML - ��������</title> <script language=javascript> <!-- //global variables var topStopPoint="null",layerRef="null",styleSwitch="null",currtop=-100; function init() { browser='IE'; layerRef="document.all"; styleSwitch=".style"; visibleVar="visible"; topStopPoint="0px"; plannerStop="0px"; leftStopPoint="-640px"; initialBotX="480px"; pxSwitch="px"; widthClipSwitch=".posWidth"; heightClipSwitch=".posHeight"; plannerFormSwitch=""; go(); } // --> </script> <STYLE TYPE="text/css"> #mircLayer {position: absolute; visibility: visible; top: -200; left: 00; width: 1; z-index: -89040;} #x0letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89050;} #x1letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89050;} #x2letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89051;} #x3letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89052;} #x4letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89053;} #x5letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89054;} #x6letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89055;} #x7letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89056;} #x8letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89057;} #x9letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89058;} #x10letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89059;} #x11letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89060;} #x12letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89061;} #x13letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89062;} #x14letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89063;} #x15letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89064;} #x16letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89065;} #x17letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89066;} #x18letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89067;} #x19letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89068;} #x20letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89069;} #x21letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89070;} #x22letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89071;} #x23letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89072;} #x24letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89073;} #x25letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89074;} #x26letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89075;} #x27letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89076;} #x28letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89077;} #x29letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89078;} #x30letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89079;} #x31letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89080;} #x32letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89081;} #x33letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89082;} #x34letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89083;} #x35letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89084;} #x36letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89085;} #x37letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89086;} #x38letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89087;} #x39letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89088;} #x40letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89089;} #x41letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89070;} #x42letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89071;} #x43letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89072;} #x44letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89073;} #x45letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89074;} #x46letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89075;} #x47letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89076;} #x48letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89077;} #x49letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89078;} #x50letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89079;} #x51letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89080;} #x52letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89081;} #x53letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89082;} #x54letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89083;} #x55letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89084;} #x56letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89085;} #x57letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89086;} #x58letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89087;} #x59letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89088;} #x60letterLayer {position: absolute; visibility: hidden; top: -200; left: 00; width: 1; z-index: -89089;} #text {position: absolute; z-index: +100000; top: 80; left: 30;} </style> </head> <body onload="init()" bgcolor="#99cc66"> <script language=javascript> <!-- var nfrases=2,curfrase=0,nbukv=0; frases=new Array(nfrases); frases[0]="http://www.redmount.com"; frases[1]="all about dhtml & javascript"; var sm=60,way_x=240,zaderzka=100; var h_beg=100,h_end=21; var w_beg=100; w_end=new Array; w_new=new Array; h_new=new Array; var j_beg=150; i_beg=new Array; i=new Array; j=new Array; var moving_letter,zaderzka,c,pauza,p,d,nextmove=0; ll=new Array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"); bl=new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"); f=new Array("0","1","2","3","4","5","6","7","8","9"); s1=new Array('"','&',"'",'\\',"^",":",",","@","$","+","!","{","}","-","#","%","+",".",";","[","]"); s2=new Array("?","(",")","/","*","~","<",">","_","|"," "); w_ll=new Array(14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14); w_bl=new Array(14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14); w_f=new Array(14,14,14,14,14,14,14,14,14,14); w_s1=new Array(14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14); w_s2=new Array(14,14,14,14,14,14,14,14,14,14,14); sr_ll=new Array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"); sr_bl=new Array("aa","bb","cc","dd","ee","ff","gg","hh","ii","jj","kk","ll","mm","nn","oo","pp","qq","rr","ss","tt","uu","vv","ww","xx","yy","zz"); sr_f=new Array("0","1","2","3","4","5","6","7","8","9"); sr_s1=new Array("x2dash","xand","xapostrof","xbackslash","xbird","xcolon","xcomma","xdog","xdollar","xequal","xexclam","xfigleft","xfigright","xminus","xnumber","xpercent","xplus","xpoint","xpointcomma","xquadleft","xquadright"); sr_s2=new Array("xquestion","xscobleft","xscobright","xslash","xstar","xtilda","xtrileft","xtriright","xunder","xvert","xspace"); var nsymbols=94; letter=new Array(nsymbols); w_letter=new Array(nsymbols); sr_letter=new Array(nsymbols); for(var z=0;z<nsymbols;z++) { if(z<26) { letter[z]=ll[z]; w_letter[z]=w_ll[z]; sr_letter[z]=sr_ll[z]+'.gif'; } else if(z<52) { letter[z]=bl[z-26]; w_letter[z]=w_bl[z-26]; sr_letter[z]=sr_bl[z-26]+'.gif'; } else if(z<62) { letter[z]=f[z-52]; w_letter[z]=w_f[z-52]; sr_letter[z]=sr_f[z-52]+'.gif'; } else if(z<83) { letter[z]=s1[z-62]; w_letter[z]=w_s1[z-62]; sr_letter[z]=sr_s1[z-62]+'.gif'; } else { letter[z]=s2[z-83]; w_letter[z]=w_s2[z-83]; sr_letter[z]=sr_s2[z-83]+'.gif'; } } function go() { frase_init(curfrase); if(browser=="NN") { moveLayerTo("x0letterLayer",i_beg[0]+way_x,j_beg-way_x/2); var ii=i_beg[0]+way_x; for(var i=1;i<nbukv;i++) { var lrnm="x"+i+"letterLayer"; ii+=w_end[i-1]; moveLayerTo(lrnm,ii,j_beg-way_x/2); } } moveLayerTo("mircLayer",i_beg[0]+way_x,j_beg-way_x/2); moving_letter=0; appearing(); } function frase_init(n) { c=0,pauza=25,p=0,d=0,next_move=0; nbukv=frases[n].length; for(var z=0;z<nbukv;z++) { for(var k=0;k<nsymbols;k++) { if(frases[n].charAt(z)==letter[k]) { w_end[z]=w_letter[k]; eval(layerRef+'["x'+z+'letterLayer"].document.bukva'+z+'.src="'+sr_letter[k]+'"'); break; } } } i_beg[0]=-200; i[0]=-150; j[0]=150; for(z=1;z<nbukv;z++) { i_beg[z]=i_beg[z-1]+w_end[z-1]; i[z]=i_beg[z]; j[z]=150; } } function appearing() { for(var num=0;num<nbukv;num++) { if(num<=moving_letter) { i[num]=i[num]+sm; j[num]=j[num]-sm/2; if(i[num]<=(i_beg[num]+way_x)) { w_new[num]=w_beg-w_beg*(i[num]-i_beg[num])/way_x+w_end[num]*(i[num]-i_beg[num])/way_x; h_new[num]=h_beg-h_beg*(i[num]-i_beg[num])/way_x+h_end*(i[num]-i_beg[num])/way_x; if(browser=="IE") { eval(layerRef+'["x'+num+'letterLayer"].document.bukva'+num+'.width='+w_new[num]); eval(layerRef+'["x'+num+'letterLayer"].document.bukva'+num+'.height='+h_new[num]); } if(i[num]==(i_beg[num]+way_x)) { moveLayerTo("mircLayer",i_beg[num]+way_x+w_end[num],j_beg-way_x/2); if(browser=="NN") eval(layerRef+'["x'+num+'letterLayer"]'+styleSwitch+'.visibility="visible"'); } if(browser=="IE") { eval(layerRef+'["x'+num+'letterLayer"]'+styleSwitch+'.visibility="visible"'); moveLayerTo("x"+num+"letterLayer",i[num],j[num]); } if(i[num]<(i_beg[num]+way_x) && i[num]+sm>(i_beg[num]+way_x)) { i[num]=i_beg[num]+way_x-sm; j[num]=j_beg-way_x/2+sm/2; } } } c++; if(c>zaderzka) { moving_letter++; c=0; } } if(moving_letter>nbukv) { p++; } if(p<pauza) setTimeout("appearing()",eval(3)); else deleting(); } function deleting() { var num=nbukv-1 eval(layerRef+'["x'+num+'letterLayer"]'+styleSwitch+'.visibility="hidden"'); moveLayerTo("mircLayer",i_beg[num]+way_x,j_beg-way_x/2); if(num==0) { curfrase++; if(curfrase>=nfrases) curfrase=0; setTimeout("go()",eval(3)); } else { nbukv--; setTimeout("deleting()",eval(130)); } } function moveLayerTo(LayerName,left,top) { eval(layerRef+'["'+LayerName+'"]'+styleSwitch+'.top=top'); eval(layerRef+'["'+LayerName+'"]'+styleSwitch+'.left=left'); } //--> </script> <div id="mircLayer"> <img name = "mirc" src="xmirc.gif" width=14 height=21 border=0> </div> <div id="x0letterLayer"> <img name = "bukva0" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x1letterLayer"> <img name = "bukva1" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x2letterLayer"> <img name = "bukva2" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x3letterLayer"> <img name = "bukva3" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x4letterLayer"> <img name = "bukva4" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x5letterLayer"> <img name = "bukva5" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x6letterLayer"> <img name = "bukva6" src="xspace.gif" width=14 height=21 border=0 > </div> <div id="x7letterLayer"> <img name = "bukva7" src="xspace.gif" width=14 height=21 border=0 > </div> <div id="x8letterLayer"> <img name = "bukva8" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x9letterLayer"> <img name = "bukva9" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x10letterLayer"> <img name = "bukva10" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x11letterLayer"> <img name = "bukva11" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x12letterLayer"> <img name = "bukva12" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x13letterLayer"> <img name = "bukva13" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x14letterLayer"> <img name = "bukva14" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x15letterLayer"> <img name = "bukva15" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x16letterLayer"> <img name = "bukva16" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x17letterLayer"> <img name = "bukva17" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x18letterLayer"> <img name = "bukva18" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x19letterLayer"> <img name = "bukva19" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x20letterLayer"> <img name = "bukva20" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x21letterLayer"> <img name = "bukva21" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x22letterLayer"> <img name = "bukva22" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x23letterLayer"> <img name = "bukva23" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x24letterLayer"> <img name = "bukva24" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x25letterLayer"> <img name = "bukva25" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x26letterLayer"> <img name = "bukva26" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x27letterLayer"> <img name = "bukva27" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x28letterLayer"> <img name = "bukva28" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x29letterLayer"> <img name = "bukva29" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x30letterLayer"> <img name = "bukva30" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x31letterLayer"> <img name = "bukva31" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x32letterLayer"> <img name = "bukva32" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x33letterLayer"> <img name = "bukva33" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x34letterLayer"> <img name = "bukva34" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x35letterLayer"> <img name = "bukva35" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x36letterLayer"> <img name = "bukva36" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x37letterLayer"> <img name = "bukva37" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x38letterLayer"> <img name = "bukva38" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x39letterLayer"> <img name = "bukva39" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x40letterLayer"> <img name = "bukva40" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x41letterLayer"> <img name = "bukva41" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x42letterLayer"> <img name = "bukva42" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x43letterLayer"> <img name = "bukva43" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x44letterLayer"> <img name = "bukva44" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x45letterLayer"> <img name = "bukva45" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x46letterLayer"> <img name = "bukva46" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x47letterLayer"> <img name = "bukva47" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x48letterLayer"> <img name = "bukva48" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x49letterLayer"> <img name = "bukva49" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x50letterLayer"> <img name = "bukva50" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x51letterLayer"> <img name = "bukva51" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x52letterLayer"> <img name = "bukva52" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x53letterLayer"> <img name = "bukva53" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x54letterLayer"> <img name = "bukva54" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x55letterLayer"> <img name = "bukva55" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x56letterLayer"> <img name = "bukva56" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x57letterLayer"> <img name = "bukva57" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x58letterLayer"> <img name = "bukva58" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x59letterLayer"> <img name = "bukva59" src="xspace.gif" width=14 height=21 border=0> </div> <div id="x60letterLayer"> <img name = "bukva60" src="xspace.gif" width=14 height=21 border=0> </div> <div id="text">Text</div> </body> </html>