带倒影的图片切换效果（类似FLASH）

2024-09-05 12:21:11

字体：大中小

来源：转载

供稿：网友

这种效果好像在Youtube网站上看到过，不过Youtube是FLASH的，现在这个效果和FLASH几乎一样，这是基于JS的，带倒影的图片特效，很经典。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Youtube图片切换特效</title><style type="text/css"> html {  overflow: hidden; } body {  margin: 0px;  padding: 0px;  background: #000;  width: 100%;  height: 100%; } #imageFlow {  position: absolute;  width: 100%;  height: 80%;  left: 0%;  top: 10%;  background: #000; } #imageFlow .diapo {  position: absolute;  left: -1000px;  cursor: pointer;  -ms-interpolation-mode: nearest-neighbor; } #imageFlow .link {  border: dotted #fff 1px;  margin-left: -1px;  margin-bottom: -1px; } #imageFlow .bank {  visibility: hidden; } #imageFlow .top {  position: absolute;  width: 100%;  height: 40%;  background: #181818; } #imageFlow .text {  position: absolute;  left: 0px;  width: 100%;  bottom: 16%;  text-align: center;  color: #FFF;  font-family: verdana, arial, Helvetica, sans-serif;  z-index: 1000; } #imageFlow .title {  font-size: 0.9em;  font-weight: bold; } #imageFlow .legend {  font-size: 0.8em; } #imageFlow .scrollbar {  position: absolute;  left: 10%;  bottom: 10%;  width: 80%;  height: 16px;  z-index: 1000; } #imageFlow .track {  position: absolute;  left: 1%;  width: 98%;  height: 16px;  filter: alpha(opacity=30);  opacity: 0.3; } #imageFlow .arrow-left {  position: absolute; } #imageFlow .arrow-right {  position: absolute;  right: 0px; } #imageFlow .bar {  position: absolute;  height: 16px;  left: 25px; }</style><script type="text/javascript">var imf = function () { var lf = 0; var instances = []; 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 addEvent (o, e, f) {  if (window.addEventListener) o.addEventListener(e, f, false);  else if (window.attachEvent) r = o.attachEvent('on' + e, f); } function createReflexion (cont, img) {  var flx = false;  if (document.createElement("canvas").getContext) {   flx = document.createElement("canvas");   flx.width = img.width;   flx.height = img.height;   var context = flx.getContext("2d");   context.translate(0, img.height);   context.scale(1, -1);   context.drawImage(img, 0, 0, img.width, img.height);   context.globalCompositeOperation = "destination-out";   var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);   gradient.addColorStop(1, "rgba(255, 255, 255, 0)");   gradient.addColorStop(0, "rgba(255, 255, 255, 1)");   context.fillStyle = gradient;   context.fillRect(0, 0, img.width, img.height * 2);  } else {   flx     = document.createElement('img');   flx.src = img.src;   flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +                      'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +          (img.height * .25) + ')';  }  flx.style.position = 'absolute';  flx.style.left     = '-1000px';  cont.appendChild(flx);  return flx; } function ImageFlow(oCont, size, zoom, border) {  this.diapos     = [];  this.scr        = false;  this.size       = size;  this.zoom       = zoom;  this.bdw        = border;  this.oCont      = oCont;  this.oc         = document.getElementById(oCont);  this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');  this.text       = getElementsByClass(this.oc,   'div', 'text');  this.title      = getElementsByClass(this.text, 'div', 'title');  this.legend     = getElementsByClass(this.text, 'div', 'legend');  this.bar        = getElementsByClass(this.oc,   'img', 'bar');  this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');  this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');  this.bw         = this.bar.width;  this.alw        = this.arL.width - 5;  this.arw        = this.arR.width - 5;  this.bar.parent = this.oc.parent  = this;  this.arL.parent = this.arR.parent = this;  this.view       = this.back       = -1;  this.resize();  this.oc.onselectstart = function () { return false; }  /* ---- create images ---- */  var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');  this.NF = img.length;  for (var i = 0, o; o = img[i]; i++) {   this.diapos[i] = new Diapo(this, i,          o.rel,          o.title || '- ' + i + ' -',          o.innerHTML || o.rel,          o.href || '',          o.target || '_self'   );  }  /* ==== add mouse wheel events ==== */  if (window.addEventListener)   this.oc.addEventListener('DOMMouseScroll', function(e) {    this.parent.scroll(-e.detail);   }, false);  else this.oc.onmousewheel = function () {   this.parent.scroll(event.wheelDelta);  }  /* ==== scrollbar drag N drop ==== */  this.bar.onmousedown = function (e) {   if (!e) e = window.event;   var scl = e.screenX - this.offsetLeft;   var self = this.parent;   /* ---- move bar ---- */   this.parent.oc.onmousemove = function (e) {    if (!e) e = window.event;    self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';    self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);    if (self.view != self.back) self.calc();    return false;   }   /* ---- release scrollbar ---- */   this.parent.oc.onmouseup = function (e) {    self.oc.onmousemove = null;    return false;   }   return false;  }  /* ==== right arrow ==== */  this.arR.onclick = this.arR.ondblclick = function () {   if (this.parent.view < this.parent.NF - 1)    this.parent.calc(1);  }  /* ==== Left arrow ==== */  this.arL.onclick = this.arL.ondblclick = function () {   if (this.parent.view > 0)    this.parent.calc(-1);  } } ImageFlow.prototype = {  /* ==== targets ==== */  calc : function (inc) {   if (inc) this.view += inc;   var tw = 0;   var lw = 0;   var o = this.diapos[this.view];   if (o && o.loaded) {    /* ---- reset ---- */    var ob = this.diapos[this.back];    if (ob && ob != o) {     ob.img.className = 'diapo';     ob.z1 = 1;    }    this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);    this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);    if (o.url) {     o.img.className = 'diapo link';     window.status = 'hyperlink: ' + o.url;    } else {     o.img.className = 'diapo';     window.status = '';    }    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 = 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 = {  /* ==== 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;  } } 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, borderimf.create("imageFlow", 0.15, 1.5, 10);</script></head><body> <div id="imageFlow">  <div class="top"></div>  <div class="bank">   My identity lies in not knowing who I am   ...are made by not following instructions   ...can come between us   Here you come!   They don't know all the facts yet   Emotional intimacy   ...remains to be done before we can announce our total failure to make any progress  </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" alt="">   <img class="arrow-left" src="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" alt="">   <img class="bar" src="http://preview.zcool.com.cn/code/js/04/1/sc.gif" alt="">  </div> </div></body></html>

上一篇：很酷的JavaScript图片放大效果

下一篇：仿天极网首页幻灯图片切换特效