Tip: You can modify some of the code before running
Super Beautiful JS album pictures show the Effect of <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title></title> <meta http-equiv = "Content-type" content= "text/html;charset=gb2312" > <!--Add the following code to <pead> and </pead>--> <style Type= "Text/css" > HTML {overflow:hidden;} body {margin:0px; padding:0px; Background: #000; Position:absolute; width:100%; height:100%; Cursor:crosshair; } #box {Position:absolute; Background: #111; Border:gray solid 1px; Visibility:hidden; } #screen {Position:absolute; left:0px; width:100%; top:10%; height:80%; Background: #000; Border:gray solid 1px; #box img {position:absolute; Border:gray solid 1px; 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; Color: #ffffff; } #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" > Document.onselectstart = new Function ("return false"); O = new Array (); box = 0; img = 0; txt = 0; Tit = 0; W = 0; H = 0; NI = 0; sel = 0; Si = 0; ZOOM = 0; rimg = 0; Speed =. 06;//animation Speed delay =. 5;//1 = no delay function dtext () {txt.style.textAlign = Tit.style.textAlign = (SE L<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 ()", 32); }} 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. 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> ' +lNk[i].innerhtml+ '; O[i] = new CObj (i, S, X, T, Img[i].title); Img[i].alt = ""; Img[i].title = ""; Img[i].onmousedown = new Function ("return false;"); Img[i].onmouseover = new Function (' o[' +i+ '].over (); '); if (lnk[i].href!= "") {/* = = = = = = = = Hyperlink =/Img[i].onclick = new Function (' window.open ("' +lnk[i].href+ '", "_blank" );'); } x = = S; s = 100; } box.style.visibility = "visible"; Run (); </script> </pead> <body> <!--Add the following code to the--> <div id= "screen" between <body> and </body> > <div id= box > <span id= txt ></span> <span id= ></span> <span id= "lnk" > Lnk1 lnk2 lnk3 lnk4 lnk5 lnk6 lnk7 </span> </div> </div> <!--crossbrowser Images_loading_bar-gerard ferrandez-www.dhteumeuleu.com-feb--> <span id= "LB0" ; <span >Loading...</span> <span > <span id= "LB1" ></span> </span> </span> <script type= "Text/javascript" > 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> <!--end of Images_loading_bar code--> </body> </ptml>
Tip: You can modify some of the code before running
