老外使用Javascript写的波浪效果，非常专业。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>remember the fears - Interactive DHTML art-demos</title>
<meta name="Author" content=www.vevb.com>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #000;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
background: #666;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#screen div {
position: absolute;
font-size: 0px;
width: 0px;
height: 0px;
border-width: 0px;
border-style: solid;
border-color: #000;
border-top-color: transparent;
}
#screen img {
position: absolute;
left: -10000px;
}
</style>
<script type="text/javascript">
// ================================================================
// __| _ | | |
// (_ | -_) | _` | _ / _ / _|
// /___|/___| _|/__,_|/___//___//__|
// -----------------------------------------------------
// DOM scripting waves simulation
// script by Gerard Ferrandez - Ge-1-doot - February 2005
// Last Update (restoration) : Wednesday 14 July, 2010 19:00 CET
// http://www.dhteumeuleu.com
// ================================================================
var water = function () {
// ==== private bloc ====
var ov = [],
xm,
ym,
yb,
nx,
ny,
nw,
nh,
W,
n,
g,
X,
Y,
gw,
glo,
scr,
Yv = 0;
var Cwave = function (i) {
this.y = 0;
this.v = 0;
this.z = 0;
if (i > 0 && i < n) {
var div = document.createElement("div");
scr.appendChild(div);
this.div = div.style;
}
};
var resize = function () {
nx = scr.offsetLeft;
ny = scr.offsetTop;
nw = scr.offsetWidth;
nh = scr.offsetHeight * 0.5;
W = Math.round(nw / (n - 2)) + 1;
gw = g * W * 0.5;
for (var i = 1; i < n-1; i++) {
ov[i].div.left = Math.round((i - 1) * W) + "px";
ov[i].div.height = Math.round(nh * 8) + "px";
}
glo.width = Math.round(g * W) + "px";
glo.height = Math.round(g * W) + "px";
};
var init = function (nbr, sg) {
n = nbr;
g = sg;
document.onselectstart = function() { return false; }
onresize = resize;
document.onmousemove = function (e) {
if (window.event) e = window.event;
xm = (e.x || e.clientX) - nx;
ym = (e.y || e.clientY) - ny;
};
scr = document.getElementById("screen");
glo = document.getElementById("glob").style;
for (var i = 0; i <= n; i++) ov[i] = new Cwave(i);
resize();
X = nw / 2;
Y = -nh / 2;
splash(Math.round(X / W) + 1, -nh / 2);
wave();
};
var splash = function (c, f) {
for (var i = c, j = c + n / 2; i < j; i++){
if (i < n - 1) ov[i].z = f;
if (c + c - i - 1 > 0) ov[c + c - i - 1].z = f;
f *= 0.85;
}
};
var wave = function () {
for (var i = 1; i < n-1; i++) {
var o = ov[i];
o.y += (o.v * 0.5) + (o.z *= 0.8);
}
for (var i = 1; i < n-1; i++) {
var o = ov[i];
var o1 = ov[i + 1];
o.v += (ov[i-1].y + o1.y - 2 * o.y) * 0.5;
o.v *= .99;
var h = o.y - o1.y;
// ==== border slants ====
if (h > 0) {
o.div.top = Math.round(nh - o.y) + "px";
o.div.borderLeftWidth = Math.round(W) + "px";
o.div.borderRightWidth = "0px";
o.div.borderTopWidth = Math.round(h) + "px";
} else {
o.div.top = Math.round(nh - o1.y) + "px";
o.div.borderRightWidth = Math.round(W) + "px";
o.div.borderLeftWidth = "0px";
o.div.borderTopWidth = Math.round(Math.abs(h)) + "px";
}
}
// ====== mousemove =====
var c = Math.round(xm / W);
if (c > 1 && c < n - 2 && yb) {
y0 = ov[c].y;
if (Math.min(yb,ym) < nh - y0 && Math.max(yb,ym) > nh - y0) splash(c, -(ym - yb) * 2);
}
yb = ym;
// ====== glob ======
c = Math.round(X / W);
Yv += (ov[c].y - Y) * 0.2;
X += (ov[c].y - ov[c+1].y) * 0.5;
Y += (Yv *= 0.8);
if (X > nw - gw) X = nw - gw;
else if (X < gw) X = gw;
glo.left = Math.round(X - gw) + "px";
glo.top = Math.round(nh - Y - gw * 1.5) + "px";
// ====== loop ======
setTimeout(wave, 16);
};
return {
// ==== public bloc ====
init : init
}
}();
</script>
</head>
<body>
<div id="screen">
<img id="glob" src="images/Glob4.gif" onmousedown="return false;">
</div>
<script type="text/javascript">
// ==== start script ====
setTimeout(function() {
water.init(64, 8);
}, 100);
</script>
</body>
</html>
新闻热点
疑难解答
