212、图片展示代码 代码

212、图片展示代码  代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>超酷超绚精美图片展示效果代码</title>

<meta http-equiv="imagetoolbar" content="no">

<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 = (sel<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 in 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><a href="'+Lnk[i].href+'">'+Lnk[i].innerHTML+'</a>';

              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>

</head>

 

<body>

 

<div id="screen">

       <div id="box">

              <img src="sto/1001.jpg" title="explain" alt="They explained a little about what they were doing.">

              <img src="sto/1002.jpg" title="strain" alt="I hoped I wouldnt crack under the strain.">

              <img src="sto/1003.jpg" title="retain" alt="Clearly they were ready to do almost anything to retain their position.">

              <img src="sto/1004.jpg" title="mundane" alt="I observed the face of power at its most mundane.">

              <img src="sto/1005.jpg" title="inhumane" alt="But they couldnt hide the very worst of their inhumane undertakings from the people.">

              <img src="sto/1006.jpg" title="disdain" alt="They showed their utter, complete disdain for justice.">

              <img src="sto/001.jpg" title="never again" alt="Never more. Never again.">

              <span id="txt"></span><span id="tit"></span><span id="lnk">

              <a href="http://www.dhteumeuleu.com">www.dhteumeuleu.com</a> <a></a><a>

              </a><a></a><a></a><a></a><a></a></span></div>

</div>

<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->

<span id="LB0" style="position:absolute;left:50%;top:50%;">

<span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px">

Loading...</span>

<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333">

<span id="LB1" style="position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF">

</span></span></span>

<script>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>

 

</html>

 

Write a comment

Comments: 0