<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" ><pead><meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/><title>javascript's elastic album </title><meta http-equiv=" Imagetoolbar "content=" no " ><style type= "Text/css" >html {Overflow:hidden;} Body {margin:0px;padding:0px;background: #000;p Osition:absolute;width:100%;height:100%;cursor:crosshair;} #box {position:absolute;background: #000; Border:gray solid 1px;visibility:hidden;} #screen {position:absolute;left:0px;width:100%;top:10%;height:80%;background: #000; border:white solid 1px;} #box img {position:absolute;border:white solid 2px;cursor:pointer;} #box span {position:absolute;color: #ccc; font-family:verdana;font-size:12px;width:200px;} #box a {text-decoration:none;color: #ff8000;} #box a:hover{text-decoration:none;background: #ff8000;} #box a:visited {text-decoration:none;color: #ff8000;} #box A:visited:hover {text-decoration:none;Background: #ff8000; color: #ffffff;} #lnk {Visibility:hidden;} </style><script type= "Text/javascript" >//disable mouse check text Document.onselectstart = new Function ("return false") ;//new Array o = 0;img array (); box = = = 0;txt = 0;tit = 0; W = 0; H = 0;ni = 0;sel = 0;si = 0; ZOOM = 0;rimg = 0;//Animation speed =. 1; Delay Time delayed =. 1; function Dtext () {txt.style.textAlign = Tit.style.textAlign = (SEL<NI/2)? " Left ":" right "; txt.innerhtml = o[sel].tx;tit.innerhtml = O[sel].ti;} function CObj (n, S, X, TX, ti) {THIS.N = N;this.dim = S;this.tx = Tx;this.ti = ti;this.is = Img[n];this.vz = 0; THIS.SX = 0;this.x0 = x;this.x1 = 0;this.zo = 0;this.over = function () {with (this) {if (N!=sel) {O[sel].dim = 100;o[n ].dim = ZOOM * 100;sel = N;l = 0;for (k=0; k<ni; k++) {o[k].x0 = l;l + = O[k].dim;} txt.innerhtml = tit.innerhtml = ""; SetTimeout ("Dtext ()", 12);}}} This.anim = function () {with (this) {vz = speed* (vz+ (X1-SX) *delay); x1-= VZ;SX = (n==0)? 0:o[n-1].x0+o[n-1].dim;zo-= (zo- Dim) *spEed;l = (x1*si) +6* (n+1), w = Zo*si;is.style.left = Math.Round (l) + ' px '; is.style.top = Math.Round ((h-w*rimg) *.5) + ' px '; is.style.width = Math.Round (w) + ' px '; is.style.height = Math.Round (w*rimg) + ' px '; if (sel = = N) {if (sel<ni*.5) { Tit.style.left = Txt.style.left = Math.Round (l+w+6) + ' px ';} else {tit.style.left = Txt.style.left = Math.Round (L (nx*.25)-6) + ' px ';} Txt.style.top = Math.Round (-(W*RIMG) *.25) + ' px '; tit.style.top = Math.Round ((w*rimg) *.33) + ' px ';}}} function run () {for (J in O) O[j].anim (); SetTimeout ("Run ()", 16);} function Doresize () {tit.style.width = Math.Round (nx*.25) + ' px '; txt.style.width = Math.Round (nx*.25) + ' px '; Tit.style.fontSize = (NX/30) + ' px '; txt.style.fontSize = (NX/70) + ' px '; with (box.style) {width = Math.Round (W) + ' px '; Height = Math.Round (H) + ' px '; left = Math.Round (NX/2-W/2) + ' px '; top = Math.Round (NY/2-H/2) + ' px ';}} function Resize () {nx = Scr.offsetwidth;ny = Scr.offsetheight; W = Nx*90/100;si = (w ((ni+1) *6))/((zoom*100) + ((nI-1) *100)); H = (100*si*rimg) +14;doresize ();} OnrEsize = Resize;onload = function () {SCR = document.getElementById ("screen"); box = document.getElementById ("box"); tit = document.getElementById ("tit"); txt = document.getElementById ("TXT"); img = Box.getelementsbytagname ("img"); Lnk = document.getElementById ("lnk"). getElementsByTagName ("a"); NI = Img.length; Zoom = Ni;rimg = Img[0].height/img[0].width;resize (); s = ZOOM * 100;x = 0;tit.innerhtml = img[0].title;txt.innerhtml = img [0].alt;for (i=0; i<ni; i++) {var t = img[i].alt;if (lnk[i].href!= "") t+= ' <br><a href= ' ' +lnk[i].href+ ' "> ' +lnk[i].innerhtml+ ' </a> '; o[i] = new CObj (i, S, X, T, img[i].title); img[i].alt = ""; img[i].title = ""; img[i].onmouse down = new Function ("return false;"); Img[i].onmouseover = new Function (' o[' +i+ '].over (); '); if (lnk[i].href!= "") {/* = = = = = = = = = = = = = = = Hyperlink = new Function (' window.open ' ("' +lnk[i].href+ '", "_blank");} X + = S;s = 100;} box.style.visibility = "visible"; Run ();} </script></pead><body><div id= "Screen" ><dIV id= "box" "> <span id= txt ></span><span id= ></span><span id= lnk ><a href= Www.baidu.com "></a><a></a><a></a><a></a><a></a><a >&lT;/a><a></a></span></div></div><span id= "LB0" style= "Position:absolute;left : 100%;top:100%; " ><span style= "Position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background: #333 "><span id=" LB1 "style=" Position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background: #FFFFFF "></span></span></span><script>m00=document.getelementbyid" ("box"). getElementsByTagName ("img"); m01=m00.length;function Images_loading_bar () {m02=0;for (i=0;i<m01;i++) m02+= (m00[i ].complete) 1:0;document.getelementbyid ("LB1"). Style.width=math.round (m02/m01*100) + ' px '; if (M02==M01) setTimeout ("document.getElementById (' LB0 '). style.display= ' None '", 128); else SetTimeout ("Images_loading_bar ()", 64);}; Images_loading_bar ();</script></body>
JavaScript's Elastic album