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

2020-11-27 来源：星星旅游

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

<base href='http://demo.rexsong.com/200507/image_onclick_switch/'>
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh-cn"> 
<head> 
<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>

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 = ""+TXTSRC[N%nI].innerHTML+""; 
 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<iW)iW=img.width; 
 if(img.height<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(); 
 } 
 } 
}

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"> 
</head>

<body>

<h2>IMGBOX</h2>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.

<h2>the river</h2>
Awaken from my nap by the river 
 
 
 <h2>transparency</h2>
Its transparency was hypnotizing. 
 
 
 <h2>cold</h2>
Currents of cold water played with light. 
 
 
 <h2>sank in</h2>
I threw a few nuts into the river. They floated for a while, then sank in. 
 
 
 <h2>masked</h2>
A wide stepping stone masked the water's depth. 
 
 
 <h2>a glimpse</h2>
Later on, I had a glimpse of the river's bed. 
 
 
 <h2>forgotten</h2>
The wheelchair made a noise. Again, I had forgotten about my legs. 
 
 
 <h2>floated</h2>
Still, I floated in oblivion of things too real. 
 
 
 <h2>for me</h2>
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>

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

全部栏目

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