日本語
<!-- website:http://www.downcodes.com --> <!-- bbs:http://bbs.downcodes.com --> <!-- 完全な HTML コードは次のとおりです --> <html > <head> <title>Flash で生成されるのと同様の画像表示効果</title> <meta name="Author" content="http://www.downcodes.com"> <meta http-equiv= "imagetoolbar" content="no"> <style type="text/css"> body {カーソル:クロスヘア;パディング:0; 位置:絶対:背景:#222;トップ:0 ; 幅:100%; 高さ:100%;zIndex:-2;} </style> <script type="text/javascript"><!-- // ========== === ======================================= // http://www. downcodes.com // DOM バージョン : 2005.4 // ======================================= ===== ========== window.onerror = new Function("return true"); document.onselectstart = function () { return false; ///// ///////////// var NX = 3; var SP = 96; ///////////////// var オブジェクト = new Array(); var run = var xrun = 0; 1; var iW = 0; var oH = 0; 関数 CObj = document.createElement("span"); = new Function("object[ "+N+"].GE1()"); this.obj.onmousedown = new Function("return false;"); this.obj.style.cursor = "ポインタ"; .style.position = "絶対"; this.img = document.createElement("img"); this.img.src = IMGSRC[N%nI].src; .obj.appendChild(this.img); IMGBOX.appendChild(this.obj); this.x = y this.W = 0; this.H = 0; this.T = 0; 関数 CImg(Parent,y,x){ this.obj = document.createElement("span"); .obj.style.position = "絶対"; this.obj.style.overflow="hidden"; this.obj.style.cursor = "pointer"; this.img = document.createElement("img"); img.style.position = "絶対"; this.img.src = IMGSRC[N%nI].src; this.Parent.obj.appendChild(this.obj); .N = 親.N; この.y = 0; この.T = 0; .dy = 0; this.py = 0; this.pw = 0; = 0; this.idy = 0; this.GE2 = 関数 (){ with(this){ px -= dy * dR; += dh * dR; ipy -= idy * dR; with(obj.style){ 左 = Math.round(py); (pw)+1; 高さ = Math.round(ph)+1; if(dR==-1)if(pw<=W+1)obj.style.visibility="hidden" } ){ 左 = Math.round (ipx-oW); トップ = Math.round(ipy-oH) } if(++xrun>=NX*NY*SP){ xrun=0; ==-1)親。obj.style.zIndex = 0; dR = -dR; } } this.GE1 = function (N1,N2){ if(dR==1){ px = L ; py = T; dx = ((親.L + L) - (x * 親.W)) / SP; dy = ((親.T + T) - (y * 親.H)) / SP; = W; dw = (親.W - W) / SP; ipx = -L; ) - L) / SP; idy = ((y * Parent.H) - T) / SP; if(img.height>document.body.offsetHeight); .height-document.body.offsetHeight)/2; それ以外の場合、oH = 0; if(img.width>document.body.offsetWidth/2)oW=(img.width-(document.body.offsetWidth/2) ; else oW = 0; for (i=0;i<SP;i++) setTimeout("object["+N1+"].object["+N2+"].GE2()",16*i); .DOOT = 関数 (){ with(this){ W = 親.W / NX; L = x * W; } } var k = 0; 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+"</div>"; run = true; .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.高さ; with(obj.style){ W = 幅 = iW / NX; L = 左 = x * W } = W; 高さ = H; } for(オブジェクト内の変数 i) object[i].DOOT(); } } onload = function() { IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img") ; TXTSRC = document.getElementById("txtsrc").getElementsByTagName("div"); IMGBOX = document.getElementById("txtbox"); ); iH = ドキュメント.ボディ.オフセット幅/2; nI = IMGSRC.length; for(var i=0;i<NY;i++) 0;j<NX;j++ ){ object[k] = new CObj(k,i,j); object[k++].DOOT(); } } IMGBOX.style.height = iH; ; TXTBOX.style.width = iW; TXTBOX.style.left = iW; -iH/2; } / /--> </script> </head> <body> <div style="position:absolute;left:50%;top:50%;"><div id="center" style="position:absolute; "> <div id="imgbox" style="position:absolute;left:0;top:0;overflow:hidden;"></div> <div id="txtbox" style= "位置:絶対;可視性:非表示;オーバーフロー:非表示;背景:#333;色:#FFF;フォントファミリー:verdana;フォントサイズ:0.8em;"> <div style="margin:2%"> < h2>IMGBOX</h2> 左側のサムネイルをクリックすると、大きな画像が表示されます。クリックした画像に関連付けられた説明がここに表示されます。<br> <br>注: パフォーマンス上の理由から、画像はサイズ変更されず、すべての画像が表示される必要があります。 </div > </div> </div></div> <div id="imgsrc" style="visibility:hidden"> <img src=""> <img src=""> < img src=""> < img src=""> <img src=""> <img src=""> <img src=""> <img src=""> <img src=""> </ div> <div id=" txtsrc" style="visibility:hidden"> <div> <h2>川</h2><br>川のほとりで昼寝から目覚める </div> <div> <h2>透明度</h2><br> その透明度は魅惑的でした。 </div> <div> <h2>冷たい</h2><br>光と戯れる冷たい水の流れが沈み込みました。 </h2><br> 木の実をいくつか川に投げました。しばらく浮いてから沈みました。 </div> <div> <h2>マスク</h2><br>広い飛び石が川を隠しました。水の深さ</div> <div> <h2>垣間見えました</h2><br>その後、私は川底を垣間見ました。</div> <div> <h2>忘れられていました</h2>< br>車椅子が音を立てた。私はまた足のことを忘れていた。</div> <div> <h2>浮遊</h2><br>それでも私はあまりにも現実的なものを忘れて浮遊していた。 <div> <h2>私のために</h2><br>私は水面をじっと見つめていました。 </div> </div> <!--crossbrowserimages_loading_bar - Gerard Ferrandez - www。 .dhteumeuleu.com - 2005 年 2 月 --> <span id=LB0 style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font -size:10px;color: #FFFFFF;left:-50;top:-18">読み込み中...</span> <span style="position:absolute;left:-50;top:-5;font-サイズ:1px;幅:100 ;高さ:10px;背景:#333"><span id=LB1 style="position:absolute;left:0;top:0;font-size:1px;width:0;height: 10px;background:#FFFFFF" ></span></span></span> <script>m00=document.getElementById("imgsrc").getElementsByTagName("img");m01=m00.length;function image_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> <!-- image_loading_bar コードの終わり --> </body> </html>
