超酷超絢精美圖片展示效果代碼

2009-11-26 圖片特效 ℃

<p>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type" /><style type="text/css">
 html {
  overflow: hidden;
 }
 body {
  margin: 0px;
  padding: 0px;
  background: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: crosshair;
 }
 #diapoContainer {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  background: #222;
  overflow: hidden;
 }
 .imgDC {
  position: absolute;
  cursor: pointer;
  border: #000 solid 2px;
  filter: alpha(opacity=90);
  opacity: 0.9;
  visibility: hidden;
 }
 .spaDC {
  position: absolute;
  filter: alpha(opacity=20);
  opacity: 0.2;
  background: #000;
  visibility: hidden;
 }
 .imgsrc {
  position: absolute;
  width: 120px;
  height: 67px;
  visibility: hidden;
  margin: 4%;
 }
 #bkgcaption {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 6%;
  background:#1a1a1a;
 }
 #caption {
  position: absolute;
  font-family: arial, helvetica, verdana, sans-serif;
  white-space: nowrap;
  color: #fff;
  bottom: 0px;
  width: 100%;
  left: -10000px;
  text-align: center;
 }</style><script type="text/javascript">
var xm;
var ym;
/* ==== onmousemove event ==== */
document.onmousemove = function(e){
 if(window.event) e=window.event;
 xm = (e.x || e.clientX);
 ym = (e.y || e.clientY);
}
/* ==== window resize ==== */
function resize() {
 if(diapo)diapo.resize();
}
onresize = resize;
/* ==== opacity ==== */
setOpacity = function(o, alpha){
 if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
////////////////////////////////////////////////////////////////////////////////////////////
/* ===== encapsulate script ==== */
diapo = {
 O : [],
 DC : 0,
 img : 0,
 txt : 0,
 N : 0,
 xm : 0,
 ym : 0,
 nx : 0,
 ny : 0,
 nw : 0,
 nh : 0,
 rs : 0,
 rsB : 0,
 zo : 0,
 tx_pos : 0,
 tx_var : 0,
 tx_target : 0,
 /////// script parameters ////////
 attraction : 2,
 acceleration : .9,
 dampening : .1,
 zoomOver : 2,
 zoomClick : 6,
 transparency : .8,
 font_size: 18,
 //////////////////////////////////
 /* ==== diapo resize ==== */
 resize : function(){
  with(this){
   nx = DC.offsetLeft;
   ny = DC.offsetTop;
   nw = DC.offsetWidth;
   nh = DC.offsetHeight;
   txt.style.fontSize = Math.round(nh / font_size) + "px";
   if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
   rsB = rs;
  }
 },
 /* ==== create diapo ==== */
 CDiapo : function(o){
  /* ==== init variables ==== */
  this.o        = o;
  this.x_pos    = this.y_pos    = 0;
  this.x_origin = this.y_origin = 0;
  this.x_var    = this.y_var    = 0;
  this.x_target = this.y_target = 0;
  this.w_pos    = this.h_pos    = 0;
  this.w_origin = this.h_origin = 0;
  this.w_var    = this.h_var    = 0;
  this.w_target = this.h_target = 0;
  this.over     = false;
  this.click    = false;
  /* ==== create shadow ==== */
  this.spa = document.createElement("span");
  this.spa.className = "spaDC";
  diapo.DC.appendChild(this.spa);
  /* ==== create thumbnail image ==== */
  this.img = document.createElement("img");
  this.img.className = "imgDC";
  this.img.src = o.src;
  this.img.O = this;
  diapo.DC.appendChild(this.img);
  setOpacity(this.img, diapo.transparency);
  /* ==== mouse events ==== */
  this.img.onselectstart = new Function("return false;");
  this.img.ondrag = new Function("return false;");
  this.img.onmouseover = function(){
   diapo.tx_target=0;
   diapo.txt.innerHTML=this.O.o.alt;
   this.O.over=true;
   setOpacity(this,this.O.click?diapo.transparency:1);
  }
  this.img.onmouseout = function(){
   diapo.tx_target=-diapo.nw;
   this.O.over=false;
   setOpacity(this,diapo.transparency);
  }
  this.img.onclick = function() {
   if(!this.O.click){
    if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
    this.O.click = true;
    this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
    this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
    diapo.zo = this;
    setOpacity(this,diapo.transparency);
   } else {
    this.O.click = false;
    this.O.over = false;
    this.O.resize();
    diapo.zo = 0;
   }
  }
  /* ==== rearrange thumbnails based on "imgsrc" images position ==== */
  this.resize = function (){
   with (this) {
    x_origin = o.offsetLeft;
    y_origin = o.offsetTop;
    w_origin = o.offsetWidth;
    h_origin = o.offsetHeight;
   }
  }
  /* ==== animation function ==== */
  this.position = function (){
   with (this) {
    /* ==== set target position ==== */
    w_target = w_origin;
    h_target = h_origin;
    if(over){
     /* ==== mouse over ==== */
     w_target = w_origin * diapo.zoomOver;
     h_target = h_origin * diapo.zoomOver;
     x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
     y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
    } else {
     /* ==== mouse out ==== */
     x_target = x_origin;
     y_target = y_origin;
    }
    if(click){
     /* ==== clicked ==== */
     w_target = w_origin * diapo.zoomClick;
     h_target = h_origin * diapo.zoomClick;
    }
    /* ==== magic spring equations ==== */
    x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
    y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
    w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
    h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
    diapo.rs += (Math.abs(x_var) + Math.abs(y_var));
    /* ==== html animation ==== */
    with(img.style){
     left   = Math.round(x_pos) + "px";
     top    = Math.round(y_pos) + "px";
     width  = Math.round(Math.max(0, w_pos)) + "px";
     height = Math.round(Math.max(0, h_pos)) + "px";
     zIndex = Math.round(w_pos);
    }
    with(spa.style){
     left   = Math.round(x_pos + w_pos * .1) + "px";
     top    = Math.round(y_pos + h_pos * .1) + "px";
     width  = Math.round(Math.max(0, w_pos * 1.1)) + "px";
     height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
     zIndex = Math.round(w_pos);
    }
   }
  }
 },
 /* ==== main loop ==== */
 run : function(){
  diapo.xm = xm - diapo.nx;
  diapo.ym = ym - diapo.ny;
  /* ==== caption anim ==== */
  diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
  diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
  /* ==== images anim ==== */
  for(var i in diapo.O) diapo.O[i].position();
  /* ==== loop ==== */
  setTimeout("diapo.run();", 16);
 },
 /* ==== load images ==== */
 images_load : function(){
  // ===== loop until all images are loaded =====
  var M = 0;
  for(var i=0; i<diapo.N; i++) {
   if(diapo.img[i].complete) {
    diapo.img[i].style.position = "relative";
    diapo.O[i].img.style.visibility = "visible";
    diapo.O[i].spa.style.visibility = "visible";
    M++;
   }
   resize();
  }
  if(M<diapo.N) setTimeout("diapo.images_load();", 128);
 },
 /* ==== init script ==== */
 init : function() {
  diapo.DC = document.getElementById("diapoContainer");
  diapo.img = diapo.DC.getElementsByTagName("img");
  diapo.txt = document.getElementById("caption");
  diapo.N = diapo.img.length;
  for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
  diapo.resize();
  diapo.tx_pos = -diapo.nw;
  diapo.tx_target = -diapo.nw;
  diapo.images_load();
  diapo.run();
 }
}
</script></p>
<div   class="tmtchyz"   id="diapoContainer"><img class="imgsrc" alt="Reconsider your Existence" src="/images/tx/s1.jpg" /> <img class="imgsrc" alt="Something Needs to be Discovered" src="/images/tx/s2.jpg" /> <img class="imgsrc" alt="They Said Very Little" src="/images/tx/s3.jpg" /> <img class="imgsrc" alt="Only in Your Mind" src="/images/tx/s4.jpg" /> <img class="imgsrc" alt="The Power of Imagination" src="/images/tx/s5.jpg" /> <img class="imgsrc" alt="Objectivity is Impossible" src="/images/tx/s6.jpg" /> <img class="imgsrc" alt="Cleaning Up Operation" src="/images/tx/s7.jpg" /> <img class="imgsrc" alt="Arbitrary Contents" src="/images/tx/s8.jpg" />
<div   class="iuwn91r"   id="bkgcaption"> </div>
<div   class="dnwjsq4"   id="caption"> </div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
function dom_onload() {
 if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
</script>

相關(guān)特效代碼

熱門特效代碼: js圖片自動切換代碼; CSS實(shí)現(xiàn)區(qū)域內(nèi)等比例放大縮小圖片; JS圖片切換效果; 飄動圖片廣告代碼; 鼠標(biāo)經(jīng)過圖片變大; 簡單高效的javascript 幻燈片播放; JavaScript封裝的平滑圖片滾動，; 點(diǎn)擊圖片出現(xiàn)大圖; 圖片局部放大效果特效; 圖片上下左右拉伸效果特效

推薦特效代碼: 點(diǎn)擊按鈕淡入淡出彈出圖文信息; 探照燈效果圖片特效代碼; 簡單高效的javascript 幻燈片播放; 飄動圖片廣告代碼; JavaScript封裝的平滑圖片滾動，; 超酷超絢精美圖片展示效果代碼