Multi-picture Display Click Switch Effect simulation of flash effect, point small figure enlarged display, and then restore the default point. _ Image Effects

Multi-picture Display Click Switch Effect simulation of flash effect, point small figure enlarged display, and then restore the default point.

<base href= ' http://demo.rexsong.com/200507/image_onclick_switch/' > <! 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 "xml:lang=" en "lang=" ZH-CN "> <pead> <title> Similar to flash production of a picture display effect </title> <meta name= "Author" content= "http://www.webjx.com" > <meta http-equiv= " Imagetoolbar "content=" no "> <style type=" text/css "> html,body {cursor:crosshair;margin:0; Position:absolute; Overflow:hidden; Background: #222; left:0; top:0; width:100%; Height:100%;zindex:-2;} </style> <script type= "Text/javascript" ><!--//=================================================== = Window.onerror = new Function ("return true"); screen.bufferdepth = 16; Document.onselectstart = function () {return false;} var NX = 3; var NY = 3; var SP = 20; var DELAY = 96; ////////var object = new Array (); var NI = 0; var run = false; var xrun = 0; var DR = 1; var IW = 0; var IH = 0; var OH = 0; var OW = 0; function CObj (n,y,x) {this.obj = Document.createelement ("span"); This.obj.onclick = new Function ("object[" +n+). GE1 () "); This.obj.onmousedown = new Function ("return false;"); This.obj.style.cursor = "pointer"; This.obj.style.position = "absolute"; this.img = document.createelement ("img"); This.img.style.position = "absolute"; THIS.IMG.SRC = IMGSRC[N%NI].SRC; This.obj.appendChild (THIS.IMG); Imgbox.appendchild (This.obj); This.object = new Array (); this.x = x; This.y = y; This. n = n; This. W = 0; This. H = 0; This. L = 0; This. T = 0; function Cimg (parent,y,x) {this. parent = parent; This.obj = document.createelement ("span"); this.obj.style.position= "Absolute"; This.obj.style.overflow= "hidden"; This.obj.style.cursor = "pointer"; this.img = document.createelement ("img"); This.img.style.position = "absolute"; THIS.IMG.SRC = IMGSRC[N%NI].SRC; This.obj.appendChild (THIS.IMG); This. Parent.obj.appendChild (This.obj); This. N = PARENT.N; this.x = x; This.y = y; This. W = 0; This. H = 0; This. L = 0; This. T = 0; THIS.DX = 0; This.dy = 0; this.px = 0; this.py = 0; THIS.DW = 0; THIS.DH = 0; THIS.PW = 0; this.ph = 0; this.ipx = 0; this.ipy = 0; This.idx = 0; This.idy = 0; This. GE2 = function () {with (this) {px-= dx * DR; PY-= dy * DR; PW + + DW * DR; ph + + DH * DR; IPX-= idx * DR; IPY-= Idy * DR; With (Obj.style) {left = Math.Round (px); top = Math.Round (py); width = math.round (PW) +1; Height = math.round (ph) +1; if (dr==-1) if (pw<=w+1) obj.style.visibility= "hidden"; With (Img.style) {left = Math.Round (Ipx-ow); Top = Math.Round (Ipy-oh); } if (++XRUN&GT;=NX*NY*SP) {xrun=0; Run=false; if (dr==-1) Parent.obj.style.zIndex = 0; DR =-DR; }}} this. GE1 = function (n1,n2) {with (this) {if (dr==1) {px = L; py = T; DX = ((PARENT.L + L)-(x * parent.w))/SP; DY = ((parent.t + T)-(Y * Parent.H))/SP; PW = W; ph = H; DW = (parent.w-w)/SP; DH = (parent.h-h)/SP; IPX =-L; Ipy =-T; IDX = ((x * parent.w)-L)/SP; Idy = ((Y * Parent.H)-T)/SP; } obj.style.visibility= "Visible"; if (img.height>document.body.offsetheight) oh= (img.height-document.body.offsetheight)/2; else OH = 0; if (IMG.WIDTH&GT;DOCUMENT.BODY.OFFSETWIDTH/2) ow= (img.width-(DOCUMENT.BODY.OFFSETWIDTH/2))/2; else OW = 0; for (i=0;i<sp;i++) settimeout ("object[" +n1+ "].object["). GE2 () ", 16*i); }} this. Doot = function () {W = parent.w/nX H = Parent.h/ny; L = x * W; T = y * H; }} var k = 0; for (Var i=0;i<ny;i++) for (Var j=0;j<nx;j++) this.object[k++] = new cimg (THIS,I,J); This. GE1 = function () {with (this) {if (!run) {txtbox.innerhtml = "<div > +txtsrc[n%ni].innerhtml+" &LT;/DIV&G t; "; Run = true; Obj.style.zIndex = 1; for (Var i=0;i<nx*ny;i++) settimeout ("object[" +n+].object["+i+"]. GE1 ("+n+", "+i+") ", I*delay); }}} this. Doot = function () {with (this) {if (IMG.WIDTH&LT;IW) iw=img.width; if (IMG.HEIGHT&LT;IH) ih=img.height; With (Obj.style) {W = width = iw/nx; H = height = ih/ny; L = left = x * W; T = top = y * H; With (img.style) {width = W; Height = H; for (var i in object) Object[i]. Doot (); The onload = function () {imgsrc = document.getElementById ("Imgsrc"). getElementsByTagName ("img"); TXTSRC = document.getElementById ("Txtsrc"). GeteLementsbytagname ("div"); Imgbox = document.getElementById ("Imgbox"); Txtbox = document.getElementById ("Txtbox"); Center = document.getElementById ("center"); IH = Document.body.offsetHeight; IW = DOCUMENT.BODY.OFFSETWIDTH/2; NI = Imgsrc.length; var k = 0; for (Var i=0;i<ny;i++) {for (Var j=0;j<nx;j++) {Object[k] = new CObj (K,I,J); object[k++]. Doot (); } IMGBOX.style.width = IW; IMGBOX.style.height = IH; TXTBOX.style.width = IW; TXTBOX.style.height = IH; TXTBOX.style.left = IW; txtbox.style.visibility= "visible"; CENTER.style.left =-IW; CENTER.style.top =-IH/2; }//--> </script> <meta http-equiv= "Content-type content=" text/html; charset=gb2312 "> </pead> <body> <div ><div id=" center "> <div id=" Imgbox "></di v> <div id= "Txtbox" > <div > <p>imgbox</p>click the thumbnails on the left for a larg ER image. The description connected to thE clicked image is displayed here. Note:for performance reasons, images are not resized and must is all of the same size. </div> </div> </div></div> <div id= "IMGSRC" > </div&gt ; <div id= "Txtsrc" > <div> <p>the river</p> awaken from I nap by River </div> <div> <p>transparency</p> its transparency is hypnotizing. </div> <div> <p>cold</p> currents of cold water played with light. </div> <div> <p>sank in</p> I threw a few nuts into the river. They floated for a while, then sank in. </div> <div> <p>masked</p> A wide stepping stone masked the water ' s depth. </div> <div> <p>a glimpse</p> later on, I had a glimpse of the river ' s bed. </div> <div> <p>forgotten</p> The wheelchair made aNoise. Again, I had forgotten about my legs. </div> <div> <p>floated</p> Still, I floated in oblivion to things too real. </div> <div> <p>for me</p> I stared fixedly at the water ' s open arms. The stream is singing for me. </div> </div> <!--crossbrowser Images_loading_bar-gerard Ferrandez-www.dhteumeuleu.com-feb 2005- -> <span id=lb0 > <span >Loading...</span> <span > <span id=lb1 >< /SPAN> </span> </span> <script> M00=document.getelementbyid ("Imgsrc"). getElementsByTagName ("I MG "); 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); 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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]