图片特效：能够自动让位的图片展示效果

减小字体

增大字体作者：dhteumeuleu.com 来源：转载发布时间：2010-12-05 13:09:50

图片点击放大，其他图片会自动让位，老外起名为：正在变弱的邻里关系（Weakening neighbors），很有寓意。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Weakening neighbors - interactive DHTML</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
  overflow: hidden;
}
body {
  position: absolute;
  margin: 0px;
  padding: 0px;
  background: #000;
  width: 100%;
  height: 100%;
}
#screen {
  position: absolute;
  background: #000;
  left: 50%;
  top: 50%;
  width: 960px;
  height: 520px;
  margin-left: -480px;
  margin-top: -260px;
}
#screen div {
  position: absolute;
  font-family: arial;
  font-size: 12px;
  color: #FFF;
  cursor: pointer;
  overflow: hidden;
  width: 0px;
}
#screen img {
  position: absolute;
}
</style>

var res = function () {
// ---- private vars ----
var scr, a0, a1,
  divs   = new Array(),
  moves = new Array(),
  idle = false,
  nw, nh, wu, hu,
  mx = [1,0,-1,0,2,0,-2,0,3,0,-3,0,4,0,-4,0],
  my = [0,1,0,-1,0,2,0,-2,0,3,0,-3,0,4,0,-4],
  bw = 10;

////////////////////////////////////////////////////////////////////////////
// ============== grid class =============
var grid = {
  // ===== calculate grid =====
  calc : function () {
   // ---- empty grid ----
   this.grid = new Array(24);
   for (var i = 0; i < 24; i++)
    this.grid[i] = 0;
   // ---- load grid ----
   var i = 0, o;
   while ( o = divs[i++] )
    this.add(o);
  },
  // ===== return cell value =====
  cell : function (x, y) {
   return this.grid[x * 4 + y];
  },
  // ===== area weight =====
  weight : function (x, y, w, h) {
   var gw = 0;
   for(var i = 0; i < w; i++)
    for(var j = 0; j < h; j++)
     gw += this.cell(i + x, j + y);
   return gw;
  },
  // ===== add div =====
  add : function (o) {
   for(var i = 0; i < o.w; i++)
    for(var j = 0; j < o.h; j++)
     this.grid[(i + o.x) * 4 + (j + o.y)] += o.f ? 20 : 1;
  }
}

////////////////////////////////////////////////////////////////////////////
// ============== tween class =============
var tween = {
  // ===== tween stack =====
  divs : new Array(),
  // ===== create tween object =====
  tween : function (o, x, y, w, h) {
   return {
    div : o,
    x : x,
    y : y,
    w : w,
    h : h
   };
  },
  // ===== add new tween =====
  add : function (o, x, y, w, h) {
   if (o == true) return false;
   // ---- consolidate with last move ----
   var t = this.divs.length - 1;
   if (t >= 0 && this.divs[t].div == o)
    this.divs[t] = this.tween(o, x, y, w, h);
   else {
    // ---- push tween ----
    this.divs.push(
     this.tween(o, x, y, w, h)
    );
   }
  },
  // ======== start next tween =========
  next : function () {
   if (this.divs.length) {
    var t = this.divs[0];
    var o = t.div;
    o.dx = t.x - o.xc;
    o.dy = t.y - o.yc;
    o.dw = t.w - o.wc;
    o.dh = t.h - o.hc;
    o.s = 1;
    o.p = 0;
    return o;
   } else return false;
  }
}
////////////////////////////////////////////////////////////////////////////
// =============== Div constructor ===============
var Frame = function (i, div) {
  // ---- random position ----
  do {
   this.x = this.x0 = Math.floor(Math.random() * 6);
   this.y = this.y0 = Math.floor(Math.random() * 4);
  } while (moves[this.x * 4 + this.y]);
  moves[this.x * 4 + this.y] = true;
  // ---- dimensions ----
  var img = div.getElementsByTagName("img")[0];
  var wh = img.alt.split(",");
  img.alt = "";
  this.w = 1;
  this.h = 1;
  this.xc = this.x + .5;
  this.yc = this.y + .5;
  this.wc = 0;
  this.hc = 0;
  this.w1 = wh[0] * 1;
  this.h1 = wh[1] * 1;
  this.i = i;
  this.s = 0;
  div.parent = this;
  div.onclick = function () { this.parent.click(); }
  this.css = div.style;
  // ---- push tween ----
  tween.add(this, this.x, this.y, 1, 1);
}

// ========== calculate moving cost ===========
Frame.prototype.costMove = function (m) {
  // ---- what direction ----
  var sx = mx[m] > 0 ? 1 : mx[m] < 0 ? -1 : 0,
      sy = my[m] > 0 ? 1 : my[m] < 0 ? -1 : 0,
      cm = 0;
  // ---- horizontal ----
  if (sx != 0) {
   for (var i = this.x; i != this.x + mx[m]; i += sx)
    cm += grid.weight(i, this.y, this.w, this.h);
  // ---- vertical ----
  } else if (sy != 0) {
   for (var i = this.y; i != this.y + my[m]; i += sy)
    cm += grid.weight(this.x, i, this.w, this.h);
  }
  // ---- return cost ----
  return cm;
}

// ============ determine moving direction =============
Frame.prototype.findMove = function () {
  var d = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
      mx = 1000,
      cm, m;
  // =========== loop distance ============
  for (var p = 0; p < 4 && mx >= 20; p++) {
   // ======== vertical neighbors weights ========
   for (var i = 0; i < this.w; i++) {
    // ---- up ----
    if (this.y - p > 0)
     d[3 + p * 4] += grid.cell(this.x + i, this.y - (p + 1));
    else
     // ---- border ----
     d[3 + p * 4] = 100;
    // ---- bottom ----
    if (this.y + p + this.h < 4)
     d[1 + p * 4] += grid.cell(this.x + i, this.y + this.h + p);
    else
     // ---- border ----
     d[1 + p * 4] = 100;
   }
   // ======== horizontal neighbors weights ========
   for (var j = 0; j < this.h; j++) {
    // ---- left ----
    if (this.x - p > 0)
     d[2 + p * 4] += grid.cell(this.x - (p + 1), this.y + j);
    else
     // ---- border ----
     d[2 + p * 4] = 100;
    // ---- right ----
    if (this.x + this.w + p < 6)
     d[0 + p * 4] += grid.cell(this.x + this.w + p, this.y + j);
    else
     // ---- border ----
     d[0 + p * 4] = 100;
   }
   // =============== find direction to the weakest neighbor ================
   mx = 1000;
   for (var i = 0; i < 4 * (p + 1); i++) {
    if ( d[i] < mx) {
     // ---- store min values ----
     mx = d[i];
     m = i;
     cm = this.costMove(i);
    // ---- equality case ----
    } else if ( d[i] == mx) {
     // ---- less costly move ----
     var cmm = this.costMove(i);
     if (cmm < cm) {
      cm = cmm;
      m = i;
      mx = d[i];
     }
    }
   }
  }
  // ====== return direction [0 = right, 1 = bottom, 2 = left, 3 = up] ======
  return m;
}

// ============ HTML rendering =============
Frame.prototype.paint = function () {
  this.css.left   = Math.round(bw + this.xc * wu) + "px";
  this.css.top    = Math.round(bw + this.yc * hu) + "px";
  this.css.width = Math.round(Math.max(0, this.wc * wu - bw)) + "px";
  this.css.height = Math.round(Math.max(0, this.hc * hu - bw)) + "px";
}

// ========== easing function ==============
Frame.prototype.tween = function () {
  if (this.s != 0) {
   // ---- easing ----
   this.p += this.s;
   this.xc += this.dx * this.p * .01;
   this.yc += this.dy * this.p * .01;
   this.wc += this.dw * this.p * .01;
   this.hc += this.dh * this.p * .01;
   // ---- HTML rendering ----
   this.paint();
   // ---- percentage steps [1+2+3+4+5+6+7+8+9+10+9+8+7+6+5+4+3+2+1=100] ----
   if (this.p == 10)
    // ---- reverse acceleration
    this.s = -1;
   else if (this.p == 0)
    // ---- moving end
    this.s = false;
  }
  return this.s;
}

// ============= Main IA function for moving divs ===============
Frame.prototype.click = function () {
  if (moves.length) {
   var i = 0, o;
   while ( o = moves[i++] ) {
    o.f = false;
    // ---- zoom out ----
    if (o.w != 1 || o.h != 1) {
     o.w = 1;
     o.h = 1;
     tween.add(o, o.x, o.y, o.w, o.h);
    }
   }
  }
  // ---- stop here if same div ----
  if (moves[0] == this)
   moves = new Array();
  else {
   // ---- init grid weights ----
   moves = new Array();
   grid.calc();
   // =========== find the best place for the zoomed div ===========
   var mvx = 0,
       mvy = 0;
   // ---- right border limit ----
   if (this.y + this.h1 > 3)
    this.y -= this.y + this.h1 - 4;
   else {
    // ---- vertical backward move ----
    for (var i = this.y - 1; i > this.y - this.h - 1; i--)
     if (i >= 0 && grid.weight(this.x, i, this.w1, 1) == 0)
      mvy++;
   }
   // ---- bottom border limit ----
   if (this.x + this.w1 > 5)
    this.x -= this.x + this.w1 - 6;
   else if (!mvy) {
    // ---- horizontal backward move ----
    for (var i = this.x - 1; i > this.x - this.w - 1; i--)
     if (i >= 0 && grid.weight(i, this.y, 1, this.h1) == 0)
      mvx++;
   }
   // ============ move zoomed div =============
   this.x -= mvx;
   this.y -= mvy;
   this.w = this.w1;
   this.h = this.h1;
   this.f = true;
   this.findMove();
   grid.add(this);
   moves.push(this);
   // ========= cascading child moves ==========
   var k = 0, o;
   // ---- loop through all divs ----
   while ( o = divs[k++] ) {
    // ---- skip frozen div ----
    if (o.f != true) {
     // ---- loop through all cells ----
     for (var i = 0; i < o.w; i++) {
      for (var j = 0; j < o.h; j++) {
       // ---- collision (non empty cell) ----
       if (grid.cell(i + o.x, j + o.y) > 1) {
        // ---- move to a better place ----
        var m = o.findMove();
        o.x += mx[m];
        o.y += my[m];
        // ---- not inside another one ? ----
        if (grid.weight(o.x, o.y, o.w, o.h) < 20) {
         // ---- freeze div and push move ----
         o.f = true;
         grid.add(o);
         moves.push(o);
         // ---- reset main loop and exit ----
         k = 0;
         break;
        }
       }
      }
      if (o.f) break;
     }
    }
   }
   // ========= push moves in reverse order =========
   var i = moves.length, o;
   while ( o = moves[--i] )
    tween.add(o, o.x, o.y, o.w, o.h);
  }
  // ---- start tweens engine ----
  a0 = tween.next();
  if (idle) {
   idle = false;
   run();
  }
}

// ============== main loop ================
var run = function () {
  // ---- first tween ----
  if (a0) {
   a0.tween();
   if (a0.p == 10) {
    // ---- next ----
    a1 = a0;
    tween.divs.splice(0,1);
    a0 = tween.next();
   }
  }
  // ---- second tween ----
  if (a1) {
   a1.tween();
   // ---- end anim ----
   if (a1.s === false)
    a1 = false;
  }
  // ---- loop ----
  if (a0 || a1) setTimeout(run, 32);
  else idle = true;
}
// ============== init script ==============
var init = function () {
  // ---- init container ----
  scr = document.getElementById('screen');
  // ---- load divs ----
  var k = 0, o;
  while ( o = scr.getElementsByTagName("div")[k++] )
   divs.push(
    new Frame(k, o)
   );
  // ---- ajust dimensions ----
  nw = scr.offsetWidth - bw;
  nh = scr.offsetHeight - bw;
  wu = nw / 6;
  hu = nh / 4;
  // ---- start animation -----
  a0 = tween.next();
  run();
}
return {
  // ==== public bloc ====
  init : init
}
}();