老外使用JavaScript写的波浪效果

时间：2021-05-02

老外使用Javascript写的波浪效果，非常专业，我们不得不佩服老外的技术和敬业精神。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://><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://// ================================================================

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>

效果演示

本文源自：翔宇亭——IT乐园（http://），转载请保留此信息！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章