令人震撼的图片展示效果一.html

几个老外写的一个很牛的js

    }
    /* ---- calculate target sizes & positions ---- */
    o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
    var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
    var x = x0 + o.w1 + this.bdw;
    for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
     if (o.loaded) {
      o.x1 = x;
      o.w1 = (this.ht / o.r) * this.size;
      x   += o.w1 + this.bdw;
      tw  += o.w1 + this.bdw;
     }
    }
    x = x0 - this.bdw;
    for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
     if (o.loaded) {
      o.w1 = (this.ht / o.r) * this.size;
      o.x1 = x - o.w1;
      x   -= o.w1 + this.bdw;
      tw  += o.w1 + this.bdw;
      lw  += o.w1 + this.bdw;
     }
    }
    /* ---- move scrollbar ---- */
    if (!this.scr && tw) {
     var r = (this.ws - this.alw - this.arw - this.bw) / tw;
     this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
    }
    /* ---- save preview view ---- */
    this.back = this.view;
   }
  },
  /* ==== mousewheel scrolling ==== */
  scroll : function (sc) {
   if (sc < 0) {
    if (this.view < this.NF - 1) this.calc(1);
   } else {
    if (this.view > 0) this.calc(-1);
   }
  },
  /* ==== resize  ==== */
  resize : function () {
   this.wh = this.oc.clientWidth;
   this.ht = this.oc.clientHeight;
   this.ws = this.scrollbar.offsetWidth;
   this.calc();
   this.run(true);
  },
  /* ==== move all images  ==== */
  run : function (res) {
   var i = this.NF;
   while (i--) this.diapos[i].move(res);
  }
 }
 /* //////////// ==== Diapo Constructor ==== //////////// */
 Diapo = function (parent, N, src, title, text, url, target) {
  this.parent        = parent;
  this.loaded        = false;
  this.title         = title;
  this.text          = text;
  this.url           = url;
  this.target        = target;
  this.N             = N;
  this.img           = document.createElement('img');
  this.img.src       = src;
  this.img.parent    = this;
  this.img.className = 'diapo';
  this.x0            = this.parent.oc.clientWidth;
  this.x1            = this.x0;
  this.w0            = 0;
  this.w1            = 0;
  this.z1            = 1;
  this.img.parent    = this;
  this.img.onclick   = function() { this.parent.click(); }
  this.parent.oc.appendChild(this.img);
  /* ---- display external link ---- */
  if (url) {
   this.img.onmouseover = function () { this.className = 'diapo link'; }
   this.img.onmouseout  = function () { this.className = 'diapo'; }
  }
 }
 /* //////////// ==== Diapo prototype ==== //////////// */
 Diapo.prototype = {
  /* ==== HTML rendering ==== */
  move : function (res) {
   if (this.loaded) {
    var sx = this.x1 - this.x0;
    var sw = this.w1 - this.w0;
    if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
     /* ---- paint only when moving ---- */
     this.x0 += sx * .1;
     this.w0 += sw * .1;
     if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
      /* ---- paint only visible images ---- */
      this.visible = true;
      var o = this.img.style;
      var h = this.w0 * this.r;
      /* ---- diapo ---- */
      o.left   = Math.round(this.x0) + 'px';
      o.bottom = Math.floor(this.parent.ht * .25) + 'px';
      o.width  = Math.round(this.w0) + 'px';
      o.height = Math.round(h) + 'px';
      /* ---- reflexion ---- */
      if (this.flx) {
       var o = this.flx.style;
       o.left   = Math.round(this.x0) + 'px';
       o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';
       o.width  = Math.round(this.w0) + 'px';
       o.height = Math.round(h) + 'px';
      }
     } else {
      /* ---- disable invisible images ---- */
      if (this.visible) {
       this.visible = false;
       this.img.style.width = '0px';
       if (this.flx) this.flx.style.width = '0px';
      }
     }
    }
   } else {
    /* ==== image onload ==== */
    if (this.img.complete && this.img.width) {
     /* ---- get size image ---- */
     this.iw     = this.img.width;
     this.ih     = this.img.height;
     this.r      = this.ih / this.iw;
     this.loaded = true;
     /* ---- create reflexion ---- */
     this.flx    = createReflexion(this.parent.oc, this.img);
     if (this.parent.view < 0) this.parent.view = this.N;
     this.parent.calc();
    }
   }
  },
  /* ==== diapo onclick ==== */
  click : function () {
   if (this.parent.view == this.N) {
    /* ---- click on zoomed diapo ---- */
    if (this.url) {
     /* ---- open hyperlink ---- */
     window.open(this.url, this.target);
    } else {
     /* ---- zoom in/out ---- */
     this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
     this.parent.calc();
    }
   } else {
    /* ---- select diapo ---- */
    this.parent.view = this.N;
    this.parent.calc();
   }
   return false;
  }
 }
 /* //////////// ==== public methods ==== //////////// */
 return {
  /* ==== initialize script ==== */
  create : function (div, size, zoom, border) {
   /* ---- instanciate imageFlow ---- */
   var load = function () {
    var loaded = false;
    var i = instances.length;
    while (i--) if (instances[i].oCont == div) loaded = true;
    if (!loaded) {
     /* ---- push new imageFlow instance ---- */
     instances.push(
      new ImageFlow(div, size, zoom, border)
     );
     /* ---- init script (once) ---- */
     if (!imf.initialized) {
      imf.initialized = true;
      /* ---- window resize event ---- */
      addEvent(window, 'resize', function () {
       var i = instances.length;
       while (i--) instances[i].resize();
      });
      /* ---- stop drag N drop ---- */
      addEvent(document.getElementById(div), 'mouseout', function (e) {
       if (!e) e = window.event;
       var tg = e.relatedTarget || e.toElement;
       if (tg && tg.tagName == 'HTML') {
        var i = instances.length;
        while (i--) instances[i].oc.onmousemove = null;
       }
       return false;
      });
      /* ---- set interval loop ---- */
      setInterval(function () {
       var i = instances.length;
       while (i--) instances[i].run();
      }, 16);
     }
    }
   }
   /* ---- window onload event ---- */
   addEvent(window, 'load', function () { load(); });
  }
 }
}(); /* ==== create imageFlow ==== */
//          div ID    , size, zoom, border
imf.create("imageFlow", 0.15, 1.5, 10); </script>
</head>
<body>
<div id="imageFlow">
<div class="top"></div>
<div class="bank">
<a rel="http://preview.zcool.com.cn/code/js/04/1/ct37.jpg" title="Myselves" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">My identity lies in not knowing who I am</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/ct60.jpg" title="Discoveries" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">...are made by not following instructions</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/sf53.jpg" title="Nothing" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">...can come between us</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/sf48.jpg" title="New life" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">Here you come!</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/ct81.jpg" title="Optimists" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">They don't know all the facts yet</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/ct134.jpg" title="Empathy" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">Emotional intimacy</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/ct41.jpg" title="Much work" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">...remains to be done before we can announce our total failure to make any progress</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/ct75.jpg" title="System error" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">Errare Programma Est</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/bl201.jpg" title="Nonexistance" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">There's no such thing</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/ct137.jpg" title="Inside" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">I抦 now trapped, without hope of escape or rescue</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/ct65.jpg" title="E-Slaves" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">The World is flat</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/or105.jpg" title="l0v3" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">1 l0v3 j00 - f0r3v3r</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/ct139.jpg" title="T minus zero" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">111 111 111 x 111 111 111 = 12345678987654321</a>
<a rel="http://preview.zcool.com.cn/code/js/04/1/ct27.jpg" title="The End" href="http://www.okajax.com" _fcksavedurl="http://www.okajax.com">...has not been written yet</a>
</div>
<div class="text">
<div class="title">Loading</div>
<div class="legend">Please wait...</div>
</div>
<div class="scrollbar">
<img class="track" src="http://preview.zcool.com.cn/code/js/04/1/sb.gif" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/1/sb.gif" alt="">
<img class="arrow-left" src="http://preview.zcool.com.cn/code/js/04/1/sl.gif" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/1/sl.gif" alt="">
<img class="arrow-right" src="http://preview.zcool.com.cn/code/js/04/1/sr.gif" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/1/sr.gif" alt="">
<img class="bar" src="http://preview.zcool.com.cn/code/js/04/1/sc.gif" _fcksavedurl="http://preview.zcool.com.cn/code/js/04/1/sc.gif" alt="">
</div>
</div>
</body>
</html>