减小字体
增大字体- ·上一篇文章：图片特效：排列整齐而又任性的图片展示效果
- ·下一篇文章：图片特效之带标题与文字介绍的图片展示效果
图片特效：能够自动让位的图片展示效果
：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>
<script type="text/javascript">
// ======================================================================
// script by Gerard Ferrandez | February, 2010
// --------------------------------------------------------------------
// http://www.dhteumeuleu.com | http://www.twitter.com/ge1doot
// Javascript code licensed under CC-BY-NC - Do not remove this notice
// ======================================================================
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;
}
//
图片特效：能够自动让位的图片展示效果
