多图展示点击切换效果模拟的flash效果，点小图放大显示，再点恢复默认。_图象特效

多图展示点击切换效果模拟的flash效果，点小图放大显示，再点恢复默认。

<base href="http://demo.rexsong.com/200507/image_onclick_switch/"> <title>类似于Flash制作的一个图片展示效果</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; padding: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>=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>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["+N2+"].GE2()",16*i); } } this.DOOT = function (){ with(this){ 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 style='margin:2%'>"+TXTSRC[N%nI].innerHTML+"</script>

"; run = true; obj.style.zIndex = 1; for(var i=0;i

IMGBOX

Click the thumbnails on the left for a larger image. The description connected to the clicked image is displayed here. Note: for performance reasons, images are not resized and must be all of the same size.

the river

Awaken from my nap by the river

transparency

Its transparency was hypnotizing.

cold

Currents of cold water played with light.

sank in

I threw a few nuts into the river. They floated for a while, then sank in.

masked

A wide stepping stone masked the water's depth.

a glimpse

Later on, I had a glimpse of the river's bed.

forgotten

The wheelchair made a noise. Again, I had forgotten about my legs.

floated

Still, I floated in oblivion of things too real.

for me

I stared fixedly at the water's open arms. The stream was singing for me.

Loading... <script> m00=document.getElementById("imgsrc").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); if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);}; images_loading_bar(); </script>