三维坐标
绕鼠标特效
绳挂物体
爆炸式菜单
放大镜
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>2</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #111;
position: absolute;
width: 100%;
height: 100%;
}
#screen {
position:absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
cursor: pointer;
}
#screen img {
position: absolute;
}
#vb {
position: absolute;
border-left: #666 solid 1px;
left: 50%;
top: 10%;
height: 80%;
z-index: 1000;
}
#title {
position: absolute;
color: #fff;
font-family: arial;
font-weight: bold;
font-size: 1.5em;
text-align: center;
width: 100%;
bottom: 1em;
}
</style>
<script type="text/javascript">
r3d = {
///
spd : .03,
max : 160,
///
O : [],
num : 0,
down : false,
xm : 0,
ym : 0,
xb : 0,
yb : 0,
scr : 0,
R : 0,
N : 0,
Im : 0,
img : 0,
nx : 0,
ny : 0,
nw : 0,
init : function ()
{
this.scr = document.getElementById('screen');
this.img = document.getElementById('particles').getElementsByTagName('img');
this.scr.onselectstart = function () { return false; }
this.scr.ondrag = function () { return false; }
this.scr.onmousemove = function (e)
{
if (r3d.down)
{
if (window.event) e = window.event;
var xm = e.clientX - r3d.nx;
var ym = e.clientY - r3d.ny;
if (Math.abs(xm - r3d.xb) + Math.abs(ym - r3d.yb) > r3d.img[r3d.Im % r3d.img.length].width)
{
var o;
if (r3d.N < r3d.max)
{
o = document.createElement('img');
r3d.scr.appendChild(o);
r3d.O[r3d.N % r3d.max] = o;
}
else o = r3d.O[r3d.N % r3d.max];
var i = r3d.img[r3d.Im % r3d.img.length];
if (xm < r3d.nw)
{
o.X = r3d.nw - xm;
o.c = -r3d.R - Math.PI / 2;
} else {
o.X = xm - r3d.nw;
o.c = -r3d.R + Math.PI / 2;
}
o.src = i.src;
o.w = Math.round(i.width / 2);
o.style.top = Math.round(ym - o.height / 2) + 'px';
o.style.left = "-9999px";
r3d.N++;
r3d.xb = xm;
r3d.yb = ym;
}
}
return false;
}
this.scr.onmousedown = function (e)
{
r3d.down = true;
r3d.xb = r3d.yb = -999;
return false;
}
this.scr.onmouseup = function (e)
{
r3d.down = false;
r3d.Im++;
if(r3d.N > 10) document.getElementById('title').innerHTML = "";
return false;
}
r3d.resize();
r3d.run();
},
resize : function () {
var o = r3d.scr;
r3d.nw = o.offsetWidth / 2;
for (r3d.nx = 0, r3d.ny = 0; o != null; o = o.offsetParent)
{
r3d.nx += o.offsetLeft;
r3d.ny += o.offsetTop;
}
},
run : function ()
{
r3d.R += r3d.spd;
for (var i = 0, o; o = r3d.O[i]; i++)
{
o.style.left = Math.round(r3d.nw + o.X * Math.sin(r3d.R + o.c) - o.w * .5) + 'px';
o.style.zIndex = 1000 + Math.round(2 * o.w + (Math.abs(o.X) * Math.cos(r3d.R + o.c)));
}
setTimeout(r3d.run, 32);
}
}
onload = function()
{
onresize = r3d.resize;
r3d.init();
}
</script>
</head>
<body>
<div id="screen">
<div id="title">CLICK ANYWHERE AND DRAW</div>
<div id="vb"></div>
</div>
<div id="particles" style="visibility:hidden">
<img alt="" src="mb1.gif">
<img alt="" src="mb2.gif">
<img alt="" src="mb3.gif">
<img alt="" src="mb4.gif">
</div>
</body>
</html>
绕鼠标特效
<html>
<head>
<title>8</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}
img {position:absolute;top:-1000;}
</style>
<script type="text/javascript"><!--
object = new Array();
var R,xm,ym;
var kr = Math.PI/180;
function CObj(N,obj,pr,pk){
this.img = document.createElement("img");
this.img.src = obj.src;
this.img.style.zIndex = -pk;
document.body.appendChild(this.img);
this.dL = this.img.width / 2;
this.dH = this.img.height / 2;
this.N = N;
this.sens = 1;
this.xmb = 0;
this.r = 0;
this.k = 0;
this.pk = pk;
this.pr = pr;
this.x = xm;
this.y = ym;
this.dhTeuMeulEu = function (){
with (this) {
img.style.left = Math.round(x - dL + Math.cos((k -= pk * sens) * kr) * (r += pr));
img.style.top = Math.round(y - dH - (r * .5) + Math.sin(k * kr) * r);
if(r > R + 2 * N){
y = ym;
x = xm;
r = 0;
sens = xm>xmb?1:-1;
xmb = xm;
}
}
}
}
function run(){
for(i in object)object[i].dhTeuMeulEu();
setTimeout(run, 16);
}
onload = function (){
R = 40;
xm = document.body.offsetWidth / 2;
ym = document.body.offsetHeight / 2;
document.onmousemove = function(e){
if (window.event) e = window.event;
xm = (e.x || e.clientX);
ym = (e.y || e.clientY) + document.body.scrollTop;
}
I = document.getElementById("IMG").getElementsByTagName("img");
for(i=0;i<100;i++){
o = I[i%I.length];
object[i] = new CObj(i, o, 2, 80/o.width);
}
run();
}
//-->
</script>
</head>
<body>
<span id=IMG>
<img src="star1d.gif">
<img src="star1c.gif">
<img src="star1b.gif">
<img src="star1e.gif">
<img src="star1a.gif">
<img src="blomst.gif">
<img src="blad.gif">
</span>
</body></html>
绳挂物体
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>chain-1</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html, body {
position:absolute;
overflow:hidden;
margin:0px;
padding:0px;
background-color:#000;
width:100%;
height:100%;
cursor: crosshair;
}
.img {
position:absolute;
left: -1000px;
cursor: pointer;
z-index: 1;
}
</style>
<script type="text/javascript"><!--
var img;
var sun;
var earth;
var star1;
var moon;
var star2;
var xm = 0;
var ym = 0;
var nx = 0;
var ny = 0;
var xv = 0;
var yv = 0;
var X = 0;
var Y = 0;
var Lg = 0;
var N = 0;
//
var gr = .25; // gravity
//
/* ======= chain function ======= */
function Chain(img, nbP, L, P, eI) {
// create link
this.Link = function Link(img){
this.img = document.createElement("img");
document.body.appendChild(this.img);
this.img.style.position = "absolute";
this.img.src = img.src;
this.w = img.width*.5;
this.h = img.height*.5;
this.x1 = 0;
this.y1 = 0;
this.par = [];
this.L = L;
this.P = P;
this.linkage = function (i, x, y) {
with (this) {
if(par[i]) {
x = par[i].x1;
y = par[i].y1;
}
var a = Math.atan2(y1-y, x1-x);
x1 = x+Math.cos(a)*L;
y1 = (4*gr*P)+y+Math.sin(a)*L;
}
}
}
this.nbP = nbP;
this.o = [];
this.xp = 0;
this.yp = 0;
this.eI = eI;
this.w = eI.width*.5;
this.h = eI.height*.5;
/* create chain */
for(var i=0;i<nbP;i++) this.o[i] = new this.Link(img);
/* linkage */
for(var i=0;i<nbP;i++) {
this.o[i].par[0] = (i>0)?this.o[i-1]:0;
this.o[i].par[1] = (i<nbP-1)?this.o[i+1]:0;
}
// draw chain
this.move = function (x0, y0, x1, y1) {
var i;
with (this) {
if(x1!=null)for(i=0;i<nbP;i++) o[nbP-i-1].linkage(1, x1,y1);
for(i=0;i<nbP;i++) o[i].linkage(0, x0,y0);
for(i=0;i<nbP;i++) {
with(o[i]){
img.style.left = Math.round(x1-w)+"px";
img.style.top = Math.round(y1-h)+"px";
}
}
// save end point
if(x1!=null){
xp = x1;
yp = y1;
} else {
xp = o[nbP-1].x1;
yp = o[nbP-1].y1;
}
// animate end image
if(eI){
eI.style.left = Math.round(xp-w)+"px";
eI.style.top = Math.round(yp-h)+"px";
}
}
}
}
// ---------- main loop -----------
function run() {
// calculate sun position
xb = X;
yb = Y;
X += xv;
Y += yv+gr;
var dx = X-xm;
var dy = Y-ym;
var d = Math.sqrt(dx*dx+dy*dy);
var a = Math.atan2(dy, dx);
X = Math.cos(a)*Math.min(Lg,d)+xm;
Y = Math.sin(a)*Math.min(Lg,d)+ym;
xv = X-xb;
yv = Y-yb;
// animation
sun.move(xm, ym, X, Y);
earth.move(X, Y, null);
star1.move(sun.o[28].x1, sun.o[28].y1, null);
moon.move(earth.xp, earth.yp, null);
star2.move(earth.xp, earth.yp, null);
}
// -------------- initialize -------------------
onload = function() {
// mouse
document.onmousemove = function(e){
if(window.event) e=window.event;
xm=(e.x || e.clientX);
ym=(e.y || e.clientY);
}
// screen size
nx = document.documentElement.clientWidth*.5;
ny = document.documentElement.clientHeight*.5;
if(ny==0) ny = document.body.clientHeight*.5;
// click
document.onmousedown = function(e) {
if(window.event) e=window.event;
var o = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
if(o.className == "img"){
for(var i=0;i<N;i+=2) img[i].src = (gr>0)?img[i+1].src:img[i].s;
gr = -gr;
}
}
// images
img = document.getElementById('stars').getElementsByTagName('img');
N = img.length;
for(i=0;i<N;i++){
img[i].s = img[i].src;
img[i].ondrag = new Function("return false;");
}
xm = nx;
X = nx*.5;
Y = ny;
// create chains
var s = ny/38;
var p = document.getElementById('pixel');
sun = new Chain(p, 40, s, 0, img[8]);
earth = new Chain(p, 20, s, 1, img[6]);
star1 = new Chain(p, 16, s, -1, img[4]);
moon = new Chain(p, 16, s, -1, img[2]);
star2 = new Chain(p, 10, s, 1, img[0]);
Lg = 40*(s*1.2);
// zyva!
setInterval("run();", 16);
}
//-->
</script>
</head>
<body>
<div id="stars">
<!-- star -->
<img class="img" src="star.gif">
<img class="img" src="star.gif">
<!-- moon -->
<img class="img" src="Moon1.gif">
<img class="img" src="Moon3.gif">
<!-- star -->
<img class="img" src="Pinwheel4.gif">
<img class="img" src="Pinwheel3.gif">
<!-- planet -->
<img class="img" src="Planet0.gif">
<img class="img" src="Orangeplanet.gif">
<!-- sun -->
<img class="img" src="Bluesun.gif">
<img class="img" src="Sun1.gif">
</div>
<!-- chain -->
<img id="pixel" src="px1.gif" style="visibility:hidden">
</body>
</html>
爆炸式菜单
<html>
<head>
<title>2</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}
.obj {position:absolute;font-size:1px;left:-1000;cursor:pointer;}
.chi {position:absolute;cursor:pointer;font-family:verdana;}
</style>
<script type="text/javascript"><!--
// ================ MENU CONTENT ===================================
HDM = [
['一', 'THEROPODS<br>Bipedal<br>predators', 'Herrerasauria', 'Saltopodidae', 'Saltopus'],
['', '', '', '', 'Eoraptor'],
['', '', '', 'Staurikosaurus', ''],
['', '', '', 'Herrerasaurus', ''],
['', '', 'Ceratosauria', 'Coelophysids', 'Coelophysis'],
['', '', '', '', 'Saltopus'],
['', '', '', 'Ceratosaurus', ''],
['', '', '', 'Podokesaurus', ''],
['', '', '', 'Abelisaurids', 'Abelisaurus'],
['', '', '', '', 'Indosaurus'],
['', '', '', 'Noasaurus', ''],
['', '', '', 'Segisauridae', 'Segisaurus'],
['', '', '', '', 'Dilophosaurus'],
['', '', 'Coelurosauria', 'Coelurids', 'Coelurus'],
['', '', '', '', 'Ornitholestes'],
['', '', '', 'Dryptosaurus', ''],
['', '', '', 'Compsognathus', ''],
['', '', '', 'Oviraptor', ''],
['', '', '', 'Caenagnathids', 'Caenagnathus'],
['', '', '', '', 'Microvenator'],
['', '', '', 'Avimimus', ''],
['', '', '', 'Ornithomimus', ''],
['', '', '', 'Garudimimids', 'Garudimimus'],
['', '', '', '', 'Harpymimus'],
['', '', '', 'Deinocheirus', ''],
['', '', '', 'Dromaeosaurids', 'Caudipteryx'],
['', '', '', '', 'Deinonychus'],
['', '', '', '', 'Dromaeosaurus'],
['', '', '', '', 'Protarchaeopteryx'],
['', '', '', '', 'Sinornithosaurus'],
['', '', '', '', 'Sinosauropteryx'],
['', '', '', '', 'Unenlagia'],
['', '', '', '', 'Utahraptor'],
['', '', '', '', 'Velociraptor'],
['', '', '', 'Tyrannosaurids', 'Tyrannosaurus'],
['', '', '', '', 'Albertosaurus'],
['', '', '', '', 'Nanotyrannus'],
['', '', 'Carnosauria', 'Allosaurids', 'Allosaurus'],
['', '', '', '', 'Yangchuanosaurus'],
['', '', '', 'Carcharodontosaurids', 'Carcharodontosaurus'],
['', '', '', '', 'Giganotosaurus'],
['', '', '', 'Spinosaurus', ''],
['', '', '', 'Baryonyx', ''],
['', '', '', 'Megalosaurids', 'Megalosaurus'],
['', '', '', '', 'Altispinax'],
['', '', '', '', 'Erectopus'],
['', '', 'Segnosauria', 'Therizinosaurus', ''],
['', '', '', 'Segnosaurus', ''],
['', 'SAUROPODS<br>Quadrupedal<br>herbivorous', 'Prosauropoda', 'Anchisaurus', ''],
['', '', '', 'Plateosaurus', ''],
['', '', '', 'Melanorosaurus', ''],
['', '', '', 'Massospondylus', ''],
['', '', 'Sauropoda', 'Cetiosaurus', ''],
['', '', '', 'Camarasaurus', ''],
['', '', '', 'Dicraeosaurids', 'Amargasaurus'],
['', '', '', '', 'Dicraeosaurus'],
['', '', '', '', 'Rebbachisaurus'],
['', '', '', 'Euhelopodus', ''],
['', '', '', 'Titanosaurids', 'Aegyptosaurus'],
['', '', '', '', 'Alamosaurus'],
['', '', '', '', 'Andesaurus'],
['', '', '', '', 'Argentinosaurus'],
['', '', '', '', 'Hypselosaurus'],
['', '', '', '', 'Quaesitosaurus'],
['', '', '', '', 'Saltasaurus'],
['', '', '', '', 'Titanosaurus'],
['', '', '', 'Diplodocids', 'Diplodocus'],
['', '', '', '', 'Apatosaurus'],
['', '', '', '', 'Barosaurus'],
['', '', '', '', 'Supersaurus'],
['', '', '', '', 'Seismosaurus'],
['', '', '', 'Brachiosaurids', 'Astrodon'],
['', '', '', '', 'Brachiosaurus'],
['', '', '', '', 'Ultrasauros'],
['ORNITHISCHIANS', 'ORNITHOPODS<br>herbivorous', 'Fabrosauria', 'Fabrosaurids', 'Fabrosaurus'],
['', '', '', '', 'Lesothosaurus'],
['', '', '', '', 'Xiaosaurus'],
['', '', '', 'Heterodontosaurus', ''],
['', '', 'Ornithopoda', 'Hypsilophodon', ''],
['', '', '', 'Dryosaurus', ''],
['', '', '', 'Iguanodontids', 'Iguanodon'],
['', '', '', '', 'Ouranosaurus'],
['', '', '', '', 'Anoplosaurus'],
['', '', '', 'Camptosaurus', ''],
['', '', '', 'Hadrosaurids', 'Hadrosaurus'],
['', '', '', '', 'Maiasaura'],
['', '', '', '', 'Anatotitan'],
['', '', '', '', 'Edmontosaurus'],
['', '', '', '', 'Saurolophus'],
['', '', '', '', 'Trachodon'],
['', '', '', 'Lambeosaurids', 'Lambeosaurus'],
['', '', '', '', 'Bactrosaurus'],
['', '', '', '', 'Corythosaurus'],
['', '', '', '', 'Jaxartosaurus'],
['', '', '', '', 'Parasaurolophus'],
['', '', '', 'Thescelosaurus', ''],
['', 'MARGINOCEPHALIA<br>herbivorous', 'Pachycephalosauria', 'Pachycephalosaurids', 'Pachycephalosaurus'],
['', '', '', '', 'Stegoceras'],
['', '', '', '', 'Stygimoloch'],
['', '', '', 'Vannanosorus', ''],
['', '', 'Ceratopsia', 'Protoceratopsids', 'Protoceratops'],
['', '', '', '', 'Bagaceratops'],
['', '', '', '', 'Leptoceratops'],
['', '', '', '', 'Montanoceratops'],
['', '', '', '', 'Notoceratops'],
['', '', '', '', 'Zuniceratops'],
['', '', '', 'Ceratopsidae', 'Anchiceratops'],
['', '', '', '', 'Avaceratops'],
['', '', '', '', 'Arrhinoceratops'],
['', '', '', '', 'Brachyceratops'],
['', '', '', '', 'Ceratops'],
['', '', '', '', 'Monoclonius'],
['', '', '', '', 'Styracosaurus'],
['', '', '', '', 'Torosaurus'],
['', '', '', '', 'Triceratops'],
['', '', '', 'Psittacosaurus', ''],
['', 'THYREOPHORA<br>armored<br>quadrupeds', 'Scriptosoria', 'ObjectOrientus', 'MPietrus'],
['', '', '', '', 'G1Dootus', 'http://www.dhteumeuleu.com'],
['', '', '', '', 'Evolvus'],
['', '', '', 'Bizarrus', 'CybZarbius'],
['', '', '', '', 'JackFlashus'],
['', '', '', '', 'JimmyBeamus'],
['', '', 'Stegosauria', 'Huayangosaurus', ''],
['', '', '', 'Stegosaurinae', 'Stegosaurus'],
['', '', '', '', 'Dacentrurus'],
['', '', '', '', 'Kentrosaurus'],
['', '', '', '', 'Tuojiangosaurus'],
['', '', '', '', 'Yingshanosaurus'],
['', '', '', 'Craterosaurus', ''],
['', '', 'Ankylosauria', 'Nodosaurids', 'Nodosaurus'],
['', '', '', '', 'Acanthopholis'],
['', '', '', '', 'Brachyspondosaurus'],
['', '', '', '', 'Edmontonia'],
['', '', '', '', 'Hoplitosaurus'],
['', '', '', '', 'Minmi'],
['', '', '', '', 'Hylaeosaurus'],
['', '', '', '', 'Polacanthus'],
['', '', '', '', 'Sauropelta'],
['', '', '', '', 'Struthiosaurus'],
['', '', '', 'Ankylosaurus', '']
];
// ============================================================
// ========== Experimental GALACTIC Menu =============
// SCRIPT by Gerard Ferrandez - Ge-1-doot - NOV 2001
// ============================================================
// -------- global var --------------
var nx;
var ny;
var xm = 0;
var ym = 0;
var nx2;
var ny2;
var cir;
var E;
var m;
var HP = 0;
var HS = new Array();
// ===============================
var A = .0044; // rotation speed
var Cselected = "#FF0000";
var Cnode = "#00FF00";
var Chyperlink = "#FFFF00";
var Cparent = "#0000FF";
// ===============================
var cA = Math.cos(A);
var sA = Math.sin(A);
var Zoom = 0;
var ZoomF = 1;
var Xd = 0;
var Yd = 0;
var XdF = 0;
var YdF = 0;
var oB;
var root;
var tempx = 0;
var tempy = 0;
var drag = false;
var hcli = false;
// ------------------- main loop ------------------------------------------------------
function main(){
if(XdF >= Xd) Xd -= (Xd - XdF) *.1; else Xd += (XdF - Xd) *.1;
if(YdF >= Yd) Yd -= (Yd - YdF) *.1; else Yd += (YdF - Yd) *.1;
if(ZoomF > Zoom) Zoom -= (Zoom - ZoomF) *.05; else Zoom += (ZoomF - Zoom) *.05;
m.rotate();
cir.left = oB.obj.pL - E - 3;
cir.top = oB.obj.pT - E - 3;
setTimeout(main, 16);
}
// ------------------------------------------------------------------------------------
function SFMenu(label, parent) {
// ======== create Elements =========
obj = document.createElement("div");
obj.className="obj";
chi = document.createElement("div");
chi.className="chi";
chi.innerHTML = " " + label
obj.appendChild(chi);
document.body.appendChild(obj);
// ======== Attributes ============
this.ref = obj;
this.doot = obj.style;
this.ola = chi.style;
this.ref.obj = this;
this.parent = parent;
this.inscr = true;
this.visible = true;
this.pL = 0;
this.pT = 0;
this.m = new Array();
this.X = 0;
this.Y = 0;
this.lev = 0;
this.w = 0;
this.label = label;
// ==================== functions ==========================
// ------- children creation -------
this.dot = function(c) {
this.m[this.m.length] = newItem = new SFMenu(c, this);
newItem.lev = this.lev + 1;
return newItem;
}
// ------- click Event ------------
this.ref.onmousedown = function() {
hcli = true;
with(this.obj){
if(m[0]){
url = m[0].label;
if(url.indexOf("http")>=0){
window.open(url,"_blank");
} else {
HS[HP++] = parent;
oB = this;
Mdoot(root,true);
Mdoot(this.obj,false);
XdF = X;
YdF = Y;
ZoomF = m[0].lev;
}
}
}
return false;
}
// --------- Rotation ------------
this.rotate = function () {
with(this){
// --- look Ma! no hands! ---
Ax = X - Xd;
Ay = Y - Yd;
X = Ax * cA - Ay * sA + Xd;
Y = Ay * cA + Ax * sA + Yd;
// ---- children rotation ------
for(var i=0 in m) m[i].rotate();
// --- exclude invisible dots
if(visible){
pL = Zoom * (X - Xd) + nx2;
pT = Zoom * (Y - Yd) + ny2;
if(pL<0 || pL>nx || pT<0 || pT>ny){
if(inscr){
inscr = false;
doot.left = -1E4;
return;
}
} else inscr = true;
// --- move doots
if(inscr){
doot.left = pL - w * .25;
doot.top = pT - w * .25;
}
}
}
}
}
// ---- transfer & colors -------------
function Mdoot(o,s){
with(o){
if(s){
// --- Graphic Attributs
w = Math.max(2,Math.min(64,(12 - lev * 2) * (oB.obj.lev + 2))) * .8;
doot.zIndex = 100 - lev + 1;
if(w<=8)ola.visibility="hidden";
else {
ola.fontSize = w;
ola.visibility="visible";
}
doot.width = doot.height = w * 0.5;
// --- view depth clamping
if(lev<oB.obj.lev - 1 || lev>oB.obj.lev + 2){
visible = false;
doot.left = -1E4;
} else visible=true;
}
// --- color parent
if(parent)if(o == oB.obj){
parent.doot.background = Cparent;
parent.ola.color = "white";
}
// --- color selected
doot.background=(s)?"white":Cselected;
if(!s)ola.color = "white";
// --- color children
for(var i = 0 in m){
with(m[i]){
doot.background=(s)?"white":(m[0])?Cnode:Chyperlink;
ola.color=(s)?"gray":"white";
}
if(s)Mdoot(m[i],s);
}
}
}
// ---- Polar to X,Y coordinates calculation ------
function PoXY(o){
with(o){
for(var i = 0 in m){
// --- automatic angulation
angle = ((30 * m[i].lev) + i * (360 / m.length)) / (180 / Math.PI);
m[i].X = X + Math.cos(angle) * (E / m[i].lev);
m[i].Y = Y + Math.sin(angle) * (E / m[i].lev);
// -- children
PoXY(m[i]);
}
}
}
// ------ anti-select -------------------
document.onselectstart = function () {return false;}
// -------- drag STARFIELD --------------
document.onmousemove = function(e){
if (window.event) e = window.event;
xm = (e.x || e.clientX);
ym = (e.y || e.clientY);
if(drag){
XdF=tempx+(nx-xm);
YdF=tempy+(ny-ym);
}
return false;
}
document.onmousedown = function () {
if(!hcli){
tempx=XdF-(nx-xm);
tempy=YdF-(ny-ym);
document.body.style.cursor="move";
drag = true;
}
hcli = false;
return false;
}
document.onmouseup = function () {
document.body.style.cursor="";
drag = false;
return false;
}
// =============== generating menu ====================
function makeDots(){
nbrl = HDM.length;
var I = new Array();
for(i=0;i<nbrl;i++)I[i] = new Array();
N=-1;
for(j=0;j<10;j++){
for(i=0;i<nbrl;i++){
if(j<=HDM[i].length){
if(HDM[i][j]!="") if(j==0)N++; else if(HDM[i][j-1]!="")N=0; else N++;
I[i][j+1]=N;
}
}
N=0;
}
for(var i = 0 in HDM){
command = "m";
for(var j = 0 in HDM[i]){
dot = HDM[i][j];
if(dot!=""){
for(k=0;k<j;k++)command+='.m['+(I[i][k+1])+']';
command+='.dot("'+dot+'")';
eval(command);
command = "m";
}
}
}
}
// --- yo! zyva ! -----------
onload = function() {
m = new SFMenu("DYNOSAURS");
nx = document.body.offsetWidth;
ny = document.body.offsetHeight;
nx2 = nx * .5;
ny2 = ny * .5;
E = ny2 * .5;
makeDots();
PoXY(m);
root = m;
oB = m.ref;
cir = document.getElementById("circle").style;
cir.width=ny2+6;
cir.height=ny2+6;
Mdoot(m,true);
Mdoot(m,false);
main();
}
//-->
</script>
</head>
<body>
<img id="circle" src="circle.gif" style="position:absolute;left:-1000">
<div style="position:relative;font-family:verdana;color:#ccc;font-size:8pt;padding:10px;z-index:1000;">
Experimental hyper-object oriented Galactic Menu<br><br>
INSTRUCTIONS :<br>
- click the dots to navigate<br>
- drag&drop to change your position<br>
- lost in space? <span onClick="m.ref.onmousedown();" style="cursor:pointer;color:#FF0000;">click</span><br>
- back <span onClick="if(HP>0)HS[--HP].ref.onmousedown();" style="cursor:pointer;color:#FF0000"><<<</span><br><br>
</div>
</body>
</html>
放大镜
<html>
<head>
<title>2</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}
span {position:absolute;font-family: verdana; font-weight: bold;}
</style>
<script type="text/javascript"><!--
T = "What is real?How do you define real? Ifyou're talkingabout what youcan feel whatyou can smellwhat you cantaste and seethen real issimply electrical signalsinterpreted byyour brain! ";
I = 0;
o = new Array();
xm = -1000;
ym = -1000;
///
rad = 80;
dim = 200;
///
W = 0;
H = 0;
NX = 14;
NY = 14;
var nx;
var ny;
document.onmousemove = function(e){
if (window.event) e = window.event;
xm = (e.x || e.clientX) - (nx * .5) + dim * .5;
ym = (e.y || e.clientY) - (ny * .5) + dim * .5;
}
function resize() {
nx = document.body.offsetWidth;
ny = document.body.offsetHeight;
}
onresize = resize;
function CObj(N,i,j,c){
this.obj = document.createElement("span");
this.obj.innerHTML = c;
DOOT.appendChild(this.obj);
this.N = N;
this.To = 16;
this.x0 = i*2*W;
this.y0 = j*2*H;
this.anim = true;
this.mainloop = function(){
with (this) {
dx = xm - x0;
dy = ym - y0;
dist = Math.sqrt(dx * dx + dy * dy);
if (dist < rad) {
anim = true;
M = Math.cos(.5 * Math.PI * Math.abs(dist / rad));
c = Math.round(84 + M * 171);
with(obj.style){
left = x0 - dx * M;
top = y0 - dy * M;
zIndex = Math.round(100 + M);
fontSize = 8 + M * W * 2;
color = "RGB("+c+","+c+","+c+")";
}
} else {
if(anim){
with(obj.style){
left = x0;
top = y0;
zIndex = 0;
fontSize = 8;
color = "RGB(88,88,88)";
}
anim = false;
}
}
}
}
}
function run(){
for(i in o)o[i].mainloop();
setTimeout(run,16);
}
onload = function (){
DOOT = document.getElementById("doot");
with(DOOT.style){
left = -dim/2;
top = -dim/2;
width = dim;
height = dim;
}
resize();
W = (dim / NX) / 2;
H = (dim / NY) / 2;
K = 0;
for(var j=0;j<NY;j++){
for(var i=0;i<NX;i++){
c=T.charAt((I++)%T.length).toUpperCase();
if(c==" ")c="·";
o[K] = new CObj(K++,i,j,c);
}
}
run();
}
//-->
</script>
</head>
<body>
<span style="position:absolute;left:50%;top:50%">
<span id="doot"></span>
</span>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>particle-4</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #ccc;
position: absolute;
width: 100%;
height: 100%;
cursor: crosshair;
}
#SF {
position: absolute;
left: 15%;
top: 15%;
width: 70%;
height: 70%;
overflow: hidden;
background: #fff;
}
#SF img {
cursor: pointer;
position: absolute;
}
#FPS {
position: absolute;
right: 5px;
bottom: 5px;
font-size: 10px;
color: #666;
font-family: courier;
}
</style>
<script type="text/javascript">
//
var D = 150;
var NB = 15;
var o = [];
var xm = 0;
var ym = 0;
var R = 1 / (D * D);
var fps = 0;
var M = 0;
document.onmousemove = function(e){
if(window.event) e=window.event;
tg = (e.target) ? e.target : e.srcElement;
if(tg.obj){
xm = tg.obj.x;
ym = tg.obj.y;
M = 10;
} else M = 0;
}
function resize() {
nx = document.getElementById("SF").offsetWidth;
ny = document.getElementById("SF").offsetHeight;
}
onresize = resize;
obZ = function() {
this.x = Math.random() * nx;
this.y = Math.random() * ny;
this.vx = 0;
this.vy = 0;
this.O = new RotImg(this, document.getElementById("SF"), [
["p1", 0,0],
["p2", 8,-30],
["p2", 8,30],
["p5", 20,180]
]);
}
function RotImg(parent, obj, param){
this.param = param;
for(var i in param){
s = param[i];
m = document.createElement("img");
m.src = document.getElementById(s[0]).src;
m.obj = parent;
obj.appendChild(m);
param[i][0] = m;
param[i][3] = m.width * .5;
param[i][4] = m.height * .5;
param[i][2] *= Math.PI/180;
}
this.position = function (x,y, angle){
with (this) {
for(var i in param){
a = ( angle + param[i][2]);
r = param[i][1];
with(param[i][0].style){
left = Math.round(-param[i][3] + x + Math.cos(a) * r) + 'px';
top = Math.round(-param[i][4] + y + Math.sin(a) * r) + 'px';
}
}
}
}
}
function mainloop(){
M--;
fps++;
for(var i=0; i<NB; i++){
with(o[i]){
for(var j=0; j<NB; j++){
B = o[j];
if(i != j){
dx = x - B.x;
dy = y - B.y;
d = (dx * dx + dy * dy);
if(d < 2 * D * D){
w = Math.exp(-(dx * dx * R)) * Math.exp(-(dy * dy * R));
// cohesion
vx -= 1.8 * w * dx;
vy -= 1.8 * w * dy;
// avoidance
if(B.x<x) vx += 100 * w; else vx -= 100 * w;
if(B.y<y) vy += 100 * w; else vy -= 100 * w;
// alignment
b = w * B.vx;
if(Math.abs(b)>10)b = (b / Math.abs(b)) * 10;
vx += b;
b = w * B.vy;
if(Math.abs(b)>10)b = (b / Math.abs(b)) * 10;
vy += b;
}
}
}
if(M > 0){
dx = x - xm;
dy = y - ym;
w = Math.exp(-(dx * dx * R)) * Math.exp(-(dy * dy * R));
if(xm < x) ex = w; else ex = -w;
if(ym < y) ey = w; else ey = -w;
vx += 100 * NB * ex;
vy += 100 * NB * ey;
}
vx *= .98;
vy *= .98;
x += vx / (NB * 100);
y += vy / (NB * 100);
if(x > nx + 10) x = -10; else if(x < -10) x = nx + 10;
if(y > ny + 10) y = -10; else if(y < -10) y = ny + 10;
O.position(x, y, Math.atan2(vy, vx));
}
}
setTimeout("mainloop();", 1);
}
onload = function(){
resize();
xm = 10000;
ym = 10000;
for(var i=0; i<NB; i++)o[i] = new obZ()
mainloop();
setInterval("document.getElementById('FPS').innerHTML=fps+' fps';fps=0", 1000);
}
</script>
</head>
<body>
<div id="SF"></div>
<div style="visibility: hidden">
<img id="p1" src="bd0.gif">
<img id="p2" src="bd1.gif">
<img id="p5" src="bd5.gif">
</div>
<div id="FPS"></span>
</body>
</html>
6048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
