北京澳环世纪教育中心 -超酷超绚精美图片展示效果代码(六) 到 (十)

<!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>超酷超绚精美图片展示效果代码(六) - 网页特效观止-网页特效代码|JsCode.CN|</title>
<style type="text/css">
html {
  overflow: hidden;
}
body {
  position: absolute;
  margin: 0px;
  padding: 0px;
  background: #111;
  width: 100%;
  height: 100%;
}
#screen {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  background: #000;
}
#screen img {
  position: absolute;
  cursor: pointer;
  visibility: hidden;
  width: 0px;
  height: 0px;
}
#screen .tvover {
  border: solid #876;
  opacity: 1;
  filter: alpha(opacity=100);
}
#screen .tvout {
  border: solid #fff;
  opacity: 0.7;
}
#bankImages {
  display: none;
}
</style>
<script type="text/javascript">
var Library = {};
Library.ease = function () {
this.target = 0;
this.position = 0;
this.move = function (target, speed)
{
  this.position += (target - this.position) * speed;
}
}

var tv = {
/* ==== variables ==== */
O : [],
screen : {},
grid : {
  size       : 4, // 4x4 grid
  borderSize : 6, // borders size
  zoomed     : false
},
angle : {
  x : new Library.ease(),
  y : new Library.ease()
},
camera : {
  x    : new Library.ease(),
  y    : new Library.ease(),
  zoom : new Library.ease(),
  focalLength : 750 // camera Focal Length
},

/* ==== init script ==== */
init : function ()
{
  this.screen.obj = document.getElementById('screen');
  var img = document.getElementById('bankImages').getElementsByTagName('img');
  this.screen.obj.onselectstart = function () { return false; }
  this.screen.obj.ondrag        = function () { return false; }
  /* ==== create images grid ==== */
  var ni = 0;
  var n = (tv.grid.size / 2) - .5;
  for (var y = -n; y <= n; y++)
  {
   for (var x = -n; x <= n; x++)
   {
    /* ==== create HTML image element ==== */
    var o = document.createElement('img');
    var i = img[(ni++) % img.length];
    o.className = 'tvout';
    o.src = i.src;
    tv.screen.obj.appendChild(o);
    /* ==== 3D coordinates ==== */
    o.point3D = {
     x : x,
     y : y,
     z : new Library.ease()
    };
    /* ==== push object ==== */
    o.point2D = {};
    o.ratioImage = 1;
    tv.O.push(o);
    /* ==== on mouse over event ==== */
    o.onmouseover = function ()
    {
     if (!tv.grid.zoomed)
     {
      if (tv.o)
      {
       /* ==== mouse out ==== */
       tv.o.point3D.z.target = 0;
       tv.o.className = 'tvout';
      }
      /* ==== mouse over ==== */
      this.className = 'tvover';
      this.point3D.z.target = -.5;
      tv.o = this;
     }
    }
    /* ==== on click event ==== */
    o.onclick = function ()
    {
     if (!tv.grid.zoomed)
     {
      /* ==== zoom in ==== */
      tv.camera.x.target = this.point3D.x;
      tv.camera.y.target = this.point3D.y;
      tv.camera.zoom.target = tv.screen.w * 1.25;
      tv.grid.zoomed = this;
     } else {
      if (this == tv.grid.zoomed){
       /* ==== zoom out ==== */
       tv.camera.x.target = 0;
       tv.camera.y.target = 0;
       tv.camera.zoom.target = tv.screen.w /

(tv.grid.size + .1);
       tv.grid.zoomed = false;
      }
     }
    }
    /* ==== 3D transform function ==== */
    o.calc = function ()
    {
     /* ==== ease mouseover ==== */
     this.point3D.z.move(this.point3D.z.target, .5);
     /* ==== assign 3D coords ==== */
     var x = (this.point3D.x - tv.camera.x.position) *

tv.camera.zoom.position;
var y = (this.point3D.y - tv.camera.y.position) *

tv.camera.zoom.position;
     var z = this.point3D.z.position * tv.camera.zoom.position;
     /* ==== perform rotations ==== */
     var xy = tv.angle.cx * y - tv.angle.sx * z;
     var xz = tv.angle.sx * y + tv.angle.cx * z;
     var yz = tv.angle.cy * xz - tv.angle.sy * x;
     var yx = tv.angle.sy * xz + tv.angle.cy * x;
     /* ==== 2D transformation ==== */
     this.point2D.scale = tv.camera.focalLength /

(tv.camera.focalLength + yz);
     this.point2D.x = yx * this.point2D.scale;
     this.point2D.y = xy * this.point2D.scale;
     this.point2D.w = Math.round(
                        Math.max(
                          0,
                          this.point2D.scale *

tv.camera.zoom.position * .8
                        )
                      );
     /* ==== image size ratio ==== */
     if (this.ratioImage > 1)
      this.point2D.h = Math.round(this.point2D.w /

this.ratioImage);
     else
     {
      this.point2D.h = this.point2D.w;
      this.point2D.w = Math.round(this.point2D.h *

this.ratioImage);
     }
    }
    /* ==== rendering ==== */
    o.draw = function ()
    {
     if (this.complete)
     {
      /* ==== paranoid image load ==== */
      if (!this.loaded)
      {
       if (!this.img)
       {
        /* ==== create internal image ==== */
        this.img = new Image();
        this.img.src = this.src;
       }
       if (this.img.complete)
       {
        /* ==== get width / height ratio ====

*/
this.style.visibility = 'visible';
this.ratioImage = this.img.width /

this.img.height;
        this.loaded = true;
        this.img = false;
       }
      }
      /* ==== HTML rendering ==== */
      this.style.left = Math.round(
                          this.point2D.x * this.point2D.scale

+
                          tv.screen.w - this.point2D.w * .5
                        ) + 'px';
      this.style.top = Math.round(
                          this.point2D.y * this.point2D.scale

+
                          tv.screen.h - this.point2D.h * .5
                        ) + 'px';
      this.style.width = this.point2D.w + 'px';
      this.style.height = this.point2D.h + 'px';
      this.style.borderWidth = Math.round(
                                 Math.max(
                                   this.point2D.w,
                                   this.point2D.h
                                 ) * tv.grid.borderSize * .01
                               ) + 'px';
      this.style.zIndex = Math.floor(this.point2D.scale *

100);
     }
    }
   }
  }
  /* ==== start script ==== */
  tv.resize();
  mouse.y = tv.screen.y + tv.screen.h;
  mouse.x = tv.screen.x + tv.screen.w;
  tv.run();
},

/* ==== resize window ==== */
resize : function ()
{
  var o = tv.screen.obj;
  tv.screen.w = o.offsetWidth / 2;
  tv.screen.h = o.offsetHeight / 2;
  tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
  for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)
  {
   tv.screen.x += o.offsetLeft;
   tv.screen.y += o.offsetTop;
  }
},

/* ==== main loop ==== */
run : function ()
{
  /* ==== motion ease ==== */
  tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
  tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
  tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
  tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
  tv.camera.zoom.move(tv.camera.zoom.target, .05);
  /* ==== angles sin and cos ==== */
  tv.angle.cx = Math.cos(tv.angle.x.position);
  tv.angle.sx = Math.sin(tv.angle.x.position);
  tv.angle.cy = Math.cos(tv.angle.y.position);
  tv.angle.sy = Math.sin(tv.angle.y.position);
  /* ==== loop through all images ==== */
  for (var i = 0, o; o = tv.O[i]; i++)
  {
   o.calc();
   o.draw();
  }
  /* ==== loop ==== */
  setTimeout(tv.run, 32);
}
}

/* ==== global mouse position ==== */
var mouse = {
x : 0,
y : 0
}
document.onmousemove = function(e)
{
if (window.event) e = window.event;
mouse.x = e.clientX;
mouse.y = e.clientY;
return false;
}

</script>
</head>

<body>

<div id="screen">
</div>
<div id="bankImages">
<img alt="" src="images/08081201001.jpg">
<img alt="" src="images/08081201002.jpg">
<img alt="" src="images/08081201003.jpg">
<img alt="" src="images/08081201004.jpg">
<img alt="" src="images/08081201005.jpg">
<img alt="" src="images/08081201006.jpg">
<img alt="" src="images/08081204wi2.jpg">
<img alt="" src="images/08081201008.jpg">
<img alt="" src="images/08081201009.jpg">
<img alt="" src="images/08081201010.jpg">
<img alt="" src="images/08081201011.jpg">
<img alt="" src="images/08081201012.jpg">
<img alt="" src="images/08081201013.jpg">
<img alt="" src="images/08081201014.jpg">
<img alt="" src="images/08081204wi11.jpg">
<img alt="" src="images/08081204wi19.jpg"> </div>
<script type="text/javascript">
/* ==== start script ==== */
onresize = tv.resize;
tv.init();
</script>

</body>

</html>

<!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>超酷超绚精美图片展示效果代码(七) - 网页特效观止-网页特效代码|JsCode.CN|</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
  overflow: hidden;
}
body {
  position: absolute;
  margin: 0px;
  padding: 0px;
  background: #111;
  width: 100%;
  height: 100%;
}
#center {
  position: absolute;
  left: 50%;
  top: 50%;
}
#slider {
  position: absolute;
  width: 820px;
  height: 333px;
  left: -430px;
  top: -186px;
  overflow: hidden;
  background: #000;
  border: 20px solid #000;
}
#slider .slide {
  position: absolute;
  top: 0px;
  height: 333px;
  width: 500px;
  background: #000;
  overflow: hidden;
  border-left: #000 solid 1px;
  cursor: default;
}
#slider .title   {
  color: #F80;
  font-weight: bold;
  font-size: 1.2em;
  margin-right: 1.5em;
  text-decoration: none;
}
#slider .backgroundText {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  background: #000;
  filter: alpha(opacity=40);
  opacity: 0.4;
}
#slider .text {
  position: absolute;
  top: 1%;
  top: 100%;
  color: #FFF;
  font-family: verdana, arial, Helvetica, sans-serif;
  font-size: 0.9em;
  text-align: justify;
  width: 470px;
  left: 10px;
}
#slider .diapo {
  position: absolute;
  filter: alpha(opacity=100);
  opacity: 1;
  visibility: hidden;
}
</style>
<script type="text/javascript">
/* ==== slider nameSpace ==== */
var slider = function() {
/* ==== private methods ==== */
function getElementsByClass(object, tag, className) {
  var o = object.getElementsByTagName(tag);
  for ( var i = 0, n = o.length, ret = []; i < n; i++) {
   if (o[i].className == className) ret.push(o[i]);
  }
  if (ret.length == 1) ret = ret[0];
  return ret;
}
function setOpacity (obj,o) {
  if (obj.filters) obj.filters.alpha.opacity = Math.round(o);
  else obj.style.opacity = o / 100;
}
/* ==== Slider Constructor ==== */
function Slider(oCont, speed, iW, iH, oP) {
  this.slides = [];
  this.over   = false;
  this.S      = this.S0 = speed;
  this.iW     = iW;
  this.iH     = iH;
  this.oP     = oP;
  this.oc     = document.getElementById(oCont);
  this.frm    = getElementsByClass(this.oc, 'div', 'slide');
  this.NF     = this.frm.length;
  this.resize();
  for (var i = 0; i < this.NF; i++) {
   this.slides[i] = new Slide(this, i);
  }
  this.oc.parent = this;
  this.view      = this.slides[0];
  this.Z         = this.mx;
  /* ==== on mouse out event ==== */
  this.oc.onmouseout = function () {
   this.parent.mouseout();
   return false;
  }
}
Slider.prototype = {
  /* ==== animation loop ==== */
  run : function () {
   this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;
   this.view.calc();
   var i = this.NF;
   while (i--) this.slides[i].move();
  },
  /* ==== resize ==== */
  resize : function () {
   this.wh = this.oc.clientWidth;
   this.ht = this.oc.clientHeight;
   this.wr = this.wh * this.iW;
   this.r = this.ht / this.wr;
   this.mx = this.wh / this.NF;
   this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);
  },
  /* ==== rest ==== */
  mouseout : function () {
   this.over      = false;
   setOpacity(this.view.img, this.oP);
  }
}
/* ==== Slide Constructor ==== */
Slide = function (parent, N) {
  this.parent = parent;
  this.N      = N;
  this.x0     = this.x1 = N * parent.mx;
  this.v      = 0;
  this.loaded = false;
  this.cpt    = 0;
  this.start = new Date();
  this.obj    = parent.frm[N];
  this.txt    = getElementsByClass(this.obj, 'div', 'text');
  this.img    = getElementsByClass(this.obj, 'img', 'diapo');
  this.bkg    = document.createElement('div');
  this.bkg.className = 'backgroundText';
  this.obj.insertBefore(this.bkg, this.txt);
  if (N == 0) this.obj.style.borderLeft = 'none';
  this.obj.style.left = Math.floor(this.x0) + 'px';
  setOpacity(this.img, parent.oP);
  /* ==== mouse events ==== */
  this.obj.parent = this;
  this.obj.onmouseover = function() {
   this.parent.over();
   return false;
  }
}
Slide.prototype = {
  /* ==== target positions ==== */
  calc : function() {
   var that = this.parent;
   // left slides
   for (var i = 0; i <= this.N; i++) {
    that.slides[i].x1 = i * that.Z;
   }
   // right slides
   for (var i = this.N + 1; i < that.NF; i++) {
    that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
   }
  },
  /* ==== HTML animation : move slides ==== */
  move : function() {
   var that = this.parent;
   var s = (this.x1 - this.x0) / that.S;
   /* ==== lateral slide ==== */
   if (this.N && Math.abs(s) > .5) {
    this.obj.style.left = Math.floor(this.x0 += s) + 'px';
   }
   /* ==== vertical text ==== */
   var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh

- this.x0;
if (Math.abs(v - this.v) > .5) {
this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v -

that.Z) * that.iH * that.r) + 'px';
    this.v = v;
    this.cpt++;
   } else {
    if (!this.pro) {
     /* ==== adjust speed ==== */
     this.pro = true;
     var tps = new Date() - this.start;
     if(this.cpt > 1) {
      that.S = Math.max(2, (28 / (tps / this.cpt)) *

that.S0);
     }
    }
   }
   if (!this.loaded) {
    if (this.img.complete) {
     this.img.style.visibility = 'visible';
     this.loaded = true;
    }
   }
  },
  /* ==== light ==== */
  over : function () {
   this.parent.resize();
   this.parent.over = true;
   setOpacity(this.parent.view.img, this.parent.oP);
   this.parent.view = this;
   this.start = new Date();
   this.cpt = 0;
   this.pro = false;
   this.calc();
   setOpacity(this.img, 100);
  }
}
/* ==== public method - script initialization ==== */
return {
  init : function() {
   // create instances of sliders here
   // parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio,

vertical text ratio, opacity
   this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);
   setInterval("slider.s1.run();", 16);
  }
}
}();

</script>
</head>

<body>

<div id="center">
<div id="slider">
  <div class="slide">
   <img class="diapo" src="images/08081201001.jpg" alt="">
   <div class="text">
    <span class="title">The best</span> The offspring of a customized
    orbiter, O飇ostem arose as the best balanced home for our plans.
    So we submitted to its conditions. </div>
  </div>
  <div class="slide">
   <img class="diapo" src="images/08081201002.jpg" alt="">
   <div class="text">
    <span class="title">Prototype</span> O飇ostem's deep impulse flow
    is selectively regulated by a molecule originated in the prototype
    model, that creates its own variational principles, as oriented
    by the first local generation of terminable androids. </div>
  </div>
  <div class="slide">
   <img class="diapo" src="images/08081201003.jpg" alt="">
   <div class="text">
    <span class="title">Has been reduced</span> Paired hosts come out
    nicely after only two cycles now. Their size has been reduced to
    a half the original as planned, and indeed they show an evolutionary
    advantage in the process of fixing self-generated instructions.
    Plus, they are beautiful. </div>
  </div>
  <div class="slide">
   <img class="diapo" src="images/08081201004.jpg" alt="">
   <div class="text">
    <span class="title">By close-alikes</span> Now I have regained hopes
    in someday finding myself surrounded by close-alikes to us. However,
    they will not be audible, at least not in my life span. We resolved
    the low freq vibration a superior solution for our communicational
    goals ... </div>
  </div>
  <div class="slide">
   <img class="diapo" src="images/08081201005.jpg" alt="">
   <div class="text">
    <span class="title">To bear</span> We did not expect their surface
    to produce such a carbon powder coat, though this is the best model
    so far. I shall have to bear with the inconveniences. They seem
    to establish a parallel communication through that carbon coat and
    I find myself unable to decodify the signal into anything meaningful.
   </div>
  </div>
  <div class="slide">
   <img class="diapo" src="images/08081201006.jpg" alt="">
   <div class="text">
    <span class="title">The zero level</span> Today a set of vibration
    came up from the zero level; we expect to launch the transitional
    program in no longer than five basetime units. Psykesoma? galore
    and we'll betray our very nature into infinite, unending 2D

surfaces.
    We do need that vibration, and we will conquer its source. </div>
  </div>
  <div class="slide">
   <img class="diapo" src="images/08081201008.jpg" alt="">
   <div class="text">
    <span class="title">Beautifully</span> To keep my sanity I wear
    the tactile sensors all the time. They translate beautifully; I
    can even see distances while still on Psykesoma. This was quite
    a discovery. We have grown more adaptable than expected. </div>
  </div>
  <div class="slide">
   <img class="diapo" src="images/08081201009.jpg" alt="">
   <div class="text">
    <span class="title">Uneasy to match</span> Yewoona had to travel
    farther and longer than I did. Her base orbiter was set to keep
    a complex combinational path that made it uneasy to match our circuits.
    But her nature showed stronger than programmed. </div>
  </div>
  <div class="slide">
   <img class="diapo" src="images/08081201010.jpg" alt="">
   <div class="text">
    <span class="title">Adapted to serve</span> Keep feeding them. We
    will never be this lucky again; an autogenerated species adapted
    to serve all our needs! </div>
  </div>
  <div class="slide">
   <img class="diapo" src="images/08081201011.jpg" alt="">
   <div class="text">
    <a class="title" href="http://www.dhteumeuleu.com">At soonest</a>
    "Blood is dark red, iron dark blue, this tale is blissful and so
    are you". I should get to the hotel at soonest. The agency guy

must
    be there already, with some luck we'll have some nice dinner on
    him. How's that? </div>
  </div>
</div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
slider.init();
</script>

</body>

</html>

<!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>超酷超绚精美图片展示效果代码(八) - 网页特效观止-网页特效代码|JsCode.CN|</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
  overflow: hidden;
}
body {
  margin: 0px;
  padding: 0px;
  background: #222;
  position: absolute;
  width: 100%;
  height: 100%;
}
#screen {
  position:absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
#pan {
  position: absolute;
  height: 150%;
  width: 150%;
  padding: 5%;
  background: #000000 url("images/08081208bumps2.gif");
}
#screen .frame {
  position: relative;
  float: left;
  width: 29%;
  height: 27%;
  margin: 2%;
  background: #000;
  overflow: hidden;
}
#screen .slider {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222 url("images/08081208bumps3.gif");
  z-index: 1000;
}
#pan img {
  position: absolute;
  visibility: hidden;
}
#pan .legend {
  position: absolute;
  bottom: 0px;
  font-size: 1em;
  color: #FFF;
  width: 2000px;
  font-family: arial;
  font-weight: bold;
}
</style>
<script type="text/javascript">
var xm = 0;
var ym = 0;

sP = {
cx : 0,
cy : 0,
N : 0,
R : [],
I : [],
C : [],
L : [],
Id : 0,

init : function ()
{
  /* ==== init script ==== */
  this.scr = document.getElementById('screen');
  this.pan = document.getElementById('pan');
  this.div = this.pan.getElementsByTagName('div');
  this.scr.onselectstart = function () { return false; }
  this.scr.ondrag        = function () { return false; }
  /* ==== for each pane ==== */
  for (var i = 0, o; o = this.div[i]; i++)
  {
   if (o.className == 'frame')
   {
    /* ==== create legend ==== */
    o.l = document.createElement('div');
    o.l.className = 'legend';
    o.appendChild(o.l);
    /* ==== create flap ==== */
    o.r = document.createElement('div');
    o.r.className = 'slider';
    o.appendChild(o.r);
    o.r.x = 0;
    o.r.l = o.l;
    o.r.p = 0;
    o.r.s = 2;
    o.r.m = false;
    o.img = o.r.img = o.getElementsByTagName('img')[0];
    o.r.c = Math.random() * 100;
    o.r.o = o;
    sP.R[sP.N] = o.r;
    sP.I[sP.N] = o.img.src;
    sP.L[sP.N] = o.title;
    o.title = "";
    sP.N++;
    /* ==== flap mouse over event ==== */
    o.r.onmouseover = function ()
    {
     if (!this.m && this.img.complete)
     {
      /* ==== switch image ==== */
      if (sP.O != this && !this.n)
      {
       this.x = this.o.offsetWidth;
       this.l.innerHTML = sP.L[sP.Id];
       this.img.src = sP.I[sP.Id];
       this.resize();
       this.n = true;
       if(++sP.Id >= sP.N)
       {
        sP.Id = 0;
        for (var i = 0, o; o = sP.R[i]; i++)

o.n = false;
       }
      }
      /* ==== up++ ==== */
      if (sP.O)
      {
       sP.O.s = 2;
       sP.C.push(sP.O);
      }
      this.m = true;
      sP.O = this;
      sP.Or = this;
     }
    }
    /* ==== resize image ==== */
    o.r.resize = function ()
    {
     var i = new Image();
     i.src = this.img.src;
     this.img.style.width = (i.width < this.offsetWidth) ?

Math.round(this.offsetWidth * 1.25) + 'px' : Math.round(i.width) + 'px';
this.img.style.height = (i.height < this.offsetHeight) ?

Math.round(this.offsetHeight * 1.25) + 'px' : Math.round(i.height) + 'px';
     this.w = (this.img.offsetWidth - this.offsetWidth) * .5;
     this.h = (this.img.offsetHeight - this.offsetHeight) * .5;
     this.img.style.visibility = 'visible';
    }
   }
  }
  /* ==== start script ==== */
  sP.resize();
  sP.run();
},

resize : function () {
  /* ==== window resize ==== */
  var o = sP.scr;
  sP.nw = o.offsetWidth;
  sP.nh = o.offsetHeight;
  sP.iw = sP.pan.offsetWidth;
  sP.ih = sP.pan.offsetHeight;
  for (sP.nx = 0, sP.ny = 0; o != null; o = o.offsetParent)
  {
   sP.nx += o.offsetLeft;
   sP.ny += o.offsetTop;
  }
  for (var i = 0, o; o = sP.R[i]; i++) o.resize();
},

/* ==== main loop ==== */
run : function ()
{
/* ==== scroll main frame ==== */
sP.cx += (((Math.max(-sP.nw, Math.min(0, (sP.nw * .5 - (xm - sP.nx) * 2))) * (sP.iw -

sP.nw)) / sP.nw) - sP.cx) * .1;
sP.cy += (((Math.max(-sP.nh, Math.min(0, (sP.nh * .5 - (ym - sP.ny) * 2))) * (sP.ih -

sP.nh)) / sP.nh) - sP.cy) * .1;
  sP.pan.style.left = Math.round(sP.cx) + 'px';
  sP.pan.style.top = Math.round(sP.cy) + 'px';
  /* ==== lissajou ==== */
  if(sP.O) {
   sP.O.c += .015;
   sP.O.img.style.left = Math.round(-sP.O.w + sP.O.w * Math.sin(sP.O.c * 1.1)) +

'px';
   sP.O.img.style.top = Math.round(- sP.O.h + sP.O.h * Math.sin(sP.O.c)) + 'px';
   sP.O.l.style.left = Math.round(sP.O.x--) + 'px';
  }
  /* ==== up ==== */
  if (sP.Or)
  {
   sP.Or.p -= sP.Or.s;
   sP.Or.s *= 1.1;
   if (sP.Or.p < -sP.Or.offsetHeight)
   {
    sP.Or.p = -sP.Or.offsetHeight;
    sP.Or.s = 2;
    sP.Or.m = false;
    sP.Or = false;
   }
   sP.O.style.top = Math.round(sP.O.p) + 'px';
  }
  /* ==== down ==== */
  for (var i = 0, c; c = sP.C[i]; i++)
  {
   if (c != sP.Or)
   {
    c.p += c.s;
    c.s *= 1.2;
    if (c.p >= 0)
    {
     c.p = 0;
     c.s = 2;
     c.m = false;
     sP.C.splice(i, 1);
    }
    c.style.top = Math.round(c.p) + 'px';
   } else {
    c.s = 2;
    c.m = false;
    sP.C.splice(i, 1);
   }
  }
  setTimeout(sP.run, 16);
}
}

/* ==== global mouse position ==== */
document.onmousemove = function(e)
{
if (window.event) e = window.event;
xm = e.clientX;
ym = e.clientY;
return false;
}
</script>
</head>

<body>

<div id="screen">
<div id="pan">
  <div class="frame" title="Isolating the longer dimension of the main hall">
   <img src="images/08081201001.jpg" alt=""></div>
  <div class="frame" title="?We’ll start from here?, my partner said.">
   <img src="images/08081201002.jpg" alt=""></div>
  <div class="frame" title="As we proceeded, I recalled a similar situation">
   <img src="images/08081201003.jpg" alt=""></div>
  <div class="frame" title="The place was no example of resource efficient

construction.">
   <img src="images/08081201004.jpg" alt=""></div>
  <div class="frame" title="Ultracompaction had been caused by the linear vibrator.">
   <img src="images/08081201005.jpg" alt=""></div>
  <div class="frame" title="We put the meter to use. It was the fully-built one.">
   <img src="images/08081201006.jpg" alt=""></div>
  <div class="frame" title="Soon we accessed the restricted area.">
   <img src="images/08081201007.jpg" alt=""></div>
  <div class="frame" title="The combo password was validated.">
   <img src="images/08081201008.jpg" alt=""></div>
  <div class="frame" title="We succeeded to quantify the network.">
   <img src="images/08081201009.jpg" alt=""></div>
</div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
sP.init();
onresize = sP.resize;
</script>

</body>

</html>

<!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">

sP = {
cx : 0,
cy : 0,
N : 0,
R : [],
I : [],
C : [],
L : [],
Id : 0,

Math.round(this.offsetWidth * 1.25) + 'px' : Math.round(i.width) + 'px';
this.img.style.height = (i.height < this.offsetHeight) ?

/* ==== main loop ==== */
run : function ()
{
/* ==== scroll main frame ==== */
sP.cx += (((Math.max(-sP.nw, Math.min(0, (sP.nw * .5 - (xm - sP.nx) * 2))) * (sP.iw -

sP.nw)) / sP.nw) - sP.cx) * .1;
sP.cy += (((Math.max(-sP.nh, Math.min(0, (sP.nh * .5 - (ym - sP.ny) * 2))) * (sP.ih -

/* ==== global mouse position ==== */
document.onmousemove = function(e)
{
if (window.event) e = window.event;
xm = e.clientX;
ym = e.clientY;
return false;
}
</script>
</head>

<body>

</body>

</html>

<!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>超酷超绚精美图片展示效果代码(九) - 网页特效观止-网页特效代码|JsCode.CN|</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
  overflow: hidden;
}
body {
  margin: 0px;
  padding: 0px;
  background: #000;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#screen {
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  height: 98%;
  background: #000;
  color: #fff;
}
#screen div {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
}
#screen img {
  position: absolute;
  width: 100%;
  height: 100%;
}
#screen .label {
  position: absolute;
  color: #FFF;
  background: #000;
  font-family: arial;
  white-space: no-wrap;
}
</style>

<script type="text/javascript">
// ================================
// DHTML mini library
// Gerard Ferrandez - January 2007
// http://www.dhteumeuleu.com
// ================================

id = function(o) {
return document.getElementById(o);
}

px = function (x) {
return ''.concat(Math.round(x), 'px');
}

pxLeft = function(o) {
for (var x = 0; o != null; o = o.offsetParent) x += o.offsetLeft;
return x;
}

pxTop = function(o) {
for (var x = 0; o != null; o = o.offsetParent) x += o.offsetTop;
return x;
}

/* ==== DOM 2 add event ==== */
addEvent = function (o, e, f) {
var r = false;
if (window.addEventListener) {
  o.addEventListener(e, f, false);
  r = true;
} else if (window.attachEvent) {
  r = o.attachEvent('on' + e, f);
}
return r;
}
</script>
<script type="text/javascript">
// ========================================================
//            ====== Javascript Slideshow ======
// script written by Gerard Ferrandez - December 31, 2006
// http://www.dhteumeuleu.com/
// ========================================================

var diap = {
/////////////////////////////////
BR : 3,     // border size in px
ZR : .75,   // zoom ratio
SP : .1,    // speed
/////////////////////////////////
V : false,
S : false,
G : true,

resize : function () {
  /* ==== window resize event ==== */
  diap.nw = diap.scr.offsetWidth;
  diap.nh = diap.scr.offsetHeight;
  diap.nwu = (diap.nw * diap.ZR);
  diap.nhu = (diap.nh * diap.ZR);
  diap.nwt = Math.floor((diap.nw * (1 - diap.ZR) * .5) / (diap.NX - 1)) - diap.BR;
  diap.nht = Math.floor((diap.nh * (1 - diap.ZR) * .5) / (diap.NY - 1)) - diap.BR;
  diap.rc = 255 / ((diap.nw / diap.NX) - diap.nwt);
  if (diap.N) {
   diap.setPosition();
   if (!diap.G) diap.delLabels();
  }
},

setPosition : function () {
  /* ==== calculate image target position ==== */
  var k = 0;
  var y = this.S ? this.BR + Math.floor((this.NY - this.Y - 1) * (this.nht + this.BR)) :

0;
for (var j = 0; j < this.NY; j++) {
var x = this.S ? this.BR + Math.floor((this.NX - this.X - 1) * (this.nwt +

this.BR)) : 0;
   for (var i = 0; i < this.NX; i++) {
    var o = this.spa[k++];
    o.y1 = y;
    o.x1 = x;
    o.w1 = this.S ? (o == this.S ? this.nwu - this.BR : this.nwt) :

Math.ceil(this.nw / this.NX) - this.BR;
o.h1 = this.S ? (o == this.S ? this.nhu - this.BR : this.nht) :

Math.ceil(this.nh / this.NY) - this.BR;
x += this.S ? ((this.X == i) ? this.nwu : this.nwt + this.BR) :

Math.ceil(this.nw / this.NX);
}
y += this.S ? ((this.Y == j) ? this.nhu : this.nht + this.BR) : Math.ceil

(this.nh / this.NY);
}
},

delLabels : function () {
  /* ==== remove texts ==== */
  for ( var i = 0; i < diap.N; i++) {
   var o = diap.spa[i];
   if (o.T) diap.scr.removeChild(o.T);
   o.T = false;
  }
},

run : function () {
  /* ==== main loop ==== */
  for ( var i = 0; i < diap.N; i++) diap.spa[i].move();
  setTimeout(diap.run, 16);
},

init : function (container, NX, NY, path, images) {
  /* ==== initialize script ==== */
  this.scr = id(container);
  if (!this.scr || NX * NY != images.length) { alert('ID-10-T error...'); return false; }
  this.NX = NX;
  this.NY = NY;
  this.spa = {};
  this.resize();
  var k = 0;
  for (var y = 0; y < this.NY; y++) {
   for (var x = 0; x < this.NX; x++) {
    /* ==== create HTML elements ==== */
    var s = this.spa[k] = document.createElement('div');
    s.img = document.createElement('img');

    /* ==== opacity optimized function ==== */
    s.img.setOpacity = function (alpha) {
     if (alpha < 0) alpha = 0; else if (alpha > 100) alpha = 100;
     if (alpha == 100) {
      /* ==== speed opt - remove IE filter ==== */
      this.style.visibility = 'visible';
      this.style.filter = '';
      this.style.opacity = 1;
      return 100;
     } else if (alpha == 0) {
      /* ==== hide image, remove opacity ==== */
      this.style.visibility = 'hidden';
      this.style.filter = '';
      this.style.opacity = 0;
      return 0;
     }
     if (this.filters) {
      /* ==== IE filter ==== */
      if (!this.filters.alpha) this.style.filter = 'alpha

(opacity=' + alpha + ')';
      else this.filters.alpha.opacity = alpha;
     /* ==== CSS opacity ==== */
     } else this.style.opacity = alpha * .01;
     return alpha;
    }
    s.img.src = id('loading').src;
    s.appendChild(s.img);
    this.scr.appendChild(s);

    /* ==== pre-load image ==== */
    s.pre = new Image();
    s.pre.obj = s;
    s.pre.onload = function() { this.obj.img.src = this.src; }
    s.pre.src = path + images[k][0];

    /* ==== set image variables ==== */
    s.x = x;
    s.y = y;
    s.x0 = x * (this.nw / this.NX) + (this.nw / this.NX) / 2;
    s.y0 = y * (this.nh / this.NY) + (this.nh / this.NY) / 2;;
    s.x1 = x * (this.nw / this.NX);
    s.y1 = y * (this.nh / this.NY);
    s.w0 = 0;
    s.h0 = 0;
    s.w1 = 0;
    s.h1 = 0;
    s.V = 0;
    s.t = images[k][1];
    s.T = false;

    /* ==== function move image ==== */
    s.move = function() {
     /* ==== position images ==== */
     this.style.left   = px(this.x0 += (this.x1 - this.x0) *

diap.SP);
this.style.top = px(this.y0 += (this.y1 - this.y0) *

diap.SP);
this.style.width = px(this.w0 += (this.w1 - this.w0) *

diap.SP);
this.style.height = px(this.h0 += (this.h1 - this.h0) *

diap.SP);
     if (this != diap.S) {
      /* ==== set image background color ==== */
      if (Math.abs(this.w1 - this.w0) > 1) {
       var c = (!diap.G && this.V > 0) ? 255 : 16 +

Math.round(255 - diap.rc * (this.w0 - diap.nwt));
this.style.background = 'RGB('.concat(c, ',',

c, ',', c, ')');
      }
      if (this == diap.V) {
       /* ==== on mouseover: fade in ==== */
       if (this.V < 100) this.img.setOpacity(this.V +=

5);
      } else {
       /* ==== fade out ==== */
       if (this.V >= 0 && diap.G != this)

this.img.setOpacity(this.V -= 2);
      }
     }
     /* ==== text effect ==== */
     if (this.T) this.dispLabel();
    }

    /* ==== display text function (typewriter FX) ==== */
    s.dispLabel = function() {
     if (diap.G || diap.S == this) {
      /* ==== zoomed image ==== */
      this.T.style.left = px(this.x0);
      this.T.style.top   = px(this.y0);
      this.T.style.width = px(this.w0);
     } else {
      /* ==== calculate text position ==== */
      var xt = diap.S.x0 + this.w0 + diap.BR;
      if (this.y == diap.Y) {
       this.T.style.top = px(this.y0 - this.f -

diap.BR);
if (this.y == 0) var xt = diap.S.x0;
} else this.T.style.top = px(this.y0 - (this.y <=

diap.Y ? diap.BR : 0));
if (this.x > diap.X) this.T.style.left = px(diap.S.w0 +

diap.S.x0 - diap.nwu * .5);
      else this.T.style.left = px(xt);
      if (this != diap.V) {
       /* ==== text type out ==== */
       this.Tp--;
       this.T.innerHTML = this.t.substring(0,

this.Tp);
       if (this.Tp < 1) {
        diap.scr.removeChild(this.T);
        this.T = false;
       }
      } else {
       if (this.Tp < this.t.length) {
        /* ==== text type in ==== */
        this.Tp++;
        this.T.innerHTML = this.t.substring(0,

this.Tp);
       }
      }
     }
    }

    /* ==== create text function ==== */
    s.createLabel = function () {
     this.T = document.createElement('div');
     this.T.className = 'label';
     if (!diap.G && this.x > diap.X) this.T.style.textAlign =

'right';
     this.f = 4 + Math.round(Math.sqrt(diap.nht * 2));
     if(this == diap.S) {
      this.f *= 2;
      this.T.style.background = 'none';
      this.T.style.textAlign = 'center';
     }
     this.T.style.fontSize = ''.concat(this.f, 'px');
     this.T.innerHTML   = this.t;
     this.T.style.left = px(-1000);
     this.T.style.width = px(diap.nwu * .5);
     this.T.style.height = px(this.f + 3);
     this.Tp = 0;
     diap.scr.appendChild(this.T);
    }

    /* ==== on mouse over event ==== */
    s.onmouseover = function() {
     if (diap.S != this && diap.G != this) {
      /* ==== display image ==== */
      this.img.setOpacity(100);
      this.V = this.img.setOpacity(20);
     }
     /* ==== create text ==== */
     if (!this.T) this.createLabel();
     diap.V = this;
    }

    /* ==== on click event ==== */
    s.onclick = function() {
     /* ==== memorize selected image ==== */
     diap.X = this.x;
     diap.Y = this.y;
     diap.V = false;
     diap.G = false;
     this.V = this.img.setOpacity(100);
     diap.delLabels();
     if (diap.S == this) {
      /* ==== zoom out - grid mode on ==== */
      diap.S = false;
      diap.G = this;
      for (var i = 0; i < diap.N; i++) diap.spa

[i].createLabel();
     } else {
      /* ==== zoom in ==== */
      diap.S = this;
      this.createLabel();
     }
     diap.setPosition();
    }
    s.createLabel();
    s.ondblclick = s.onclick;
    s.ondrag = function () { return false; }
    k++;
   }
  }
  this.N = NX * NY;
  /* ==== add resize event ==== */
  this.resize();
  addEvent(window, 'resize', diap.resize);
  /* ==== start main loop ==== */
  this.run();
}
}

/* ==== create diaporama ==== */
onload = function () {
/* ==== container, X, T, path, [image.src, text] ==== */
diap.init("screen", 4, 4, "", [
  ["images/08081201001.jpg", "His little voodoo was a success"],
  ["images/08081201002.jpg", "She arrived from nowhere"],
  ["images/08081201003.jpg", "as cute as she could be"],
  ["images/08081201004.jpg", "It was a night of full moon"],
  ["images/08081201005.jpg", "It didn't take him anytime to fall in love"],
  ["images/08081201006.jpg", "He had been certain of his success"],
  ["images/08081201008.jpg", "In a few days after"],
  ["images/08081201009.jpg", "All the tools were in place"],
  ["images/08081201010.jpg", "The girl left a note..."],
  ["images/08081201011.jpg", "...saying she had left home"],
  ["images/08081201012.jpg", "揝o what抯 with the panic??"],
  ["images/08081201013.jpg", "Tears for fears"],
  ["images/08081201014.jpg", "A light in the dark"],
  ["images/08081204wi2.jpg", "Flashes of pain and hope"],
  ["images/08081201001.jpg", "If only we could capture..."],
  ["images/08081204wi19.jpg", "...the beauty of autumn"]
]);
}
</script>
</head>