`
wuzijingaip
  • 浏览: 329723 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

javascript 图片特效算法

算法JavaScriptHPC#C 
阅读更多
三维坐标 
<!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>
分享到：
| js中with、this的用法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript图片特效源码

    在本主题"JavaScript图片特效源码"中，我们将探讨如何使用JavaScript为网页中的图片添加各种视觉效果，以提升用户体验和网页的吸引力。 一、图片特效的基本原理 图片特效主要通过JavaScript操作DOM（文档对象模型）...

    图片显示特效javascript

    本主题主要围绕"图片显示特效javascript"展开，探讨如何利用JavaScript实现各种图片展示的动态效果。 1. 图片加载：JavaScript可以监测图片的加载状态，例如使用`onload`事件来处理图片加载完成后执行的代码，确保...

    JavaScript_js特效

    以上这些JavaScript特效都需要理解DOM操作、事件处理、动画原理、数据结构和算法等基础知识。熟练掌握JavaScript不仅可以提升用户体验，还能为开发者提供无限的创意空间。在实际应用中，常常结合CSS3和现代前端框架...

    javascript经典特效---有光源的图片效果.rar

    在JavaScript的世界里，实现有光源的图片效果是一种增强用户体验、提升网页动态视觉表现力的常见技术。这种效果通常涉及到图像处理、CSS3以及JavaScript的高级应用。本文将深入探讨如何利用JavaScript来创建具有光照...

    JavaScript网页特效范例宝典源码

    实例235 雷达扫描图片特效 363 实例236 在页面中旋转的图片 365 实例237 改变形状的图片 366 实例238 图片在页面浮动 367 实例239 随机变化的网页背景 369 8.5 选择头像 370 实例240 在列表中选择图片 370 实例241 ...

    javascript经典特效---夜空中飞舞的星星.rar

    总的来说，“夜空中飞舞的星星”这个JavaScript特效不仅展示了JavaScript在动态效果上的强大能力，也融合了数学、物理学和编程艺术，是一个很好的学习和实践项目。通过这个项目，开发者可以深入理解JavaScript事件...

    javascript经典特效---图片变形扭曲脚本.rar

    这段代码可能包括了对图片元素的获取、Canvas元素的创建、上下文的获取以及变形扭曲算法的实现。 此外，JavaScript库如Three.js、Pixi.js等提供了更高级的图形处理功能，包括3D变形和扭曲，如果这个脚本使用了类似...

    javascript经典特效---图片的组合显示.rar

    【标题】：“javascript经典特效---图片的组合显示” 在JavaScript编程中，图片的组合显示是一种常见的视觉效果，常用于创建动态、交互式的网页元素。这种技术可以用来制作各种动画、轮播图、拼图游戏或者复杂的...

    JavaScrip t实用特效范例辞典 CHM JavaScript实用特效范例辞典，一本chm格式的Js特效集，通过单击鼠标右键能够查看所有特效的源代码。这些特效包括比较基础的switch流程控制、运算符、表达式、算法、链接与CSS、图片特效、IE浏览器相关、表彰处理、声音处理、时间与日期、检查与认证、Cookies等多方面的技巧代码，本手册将众多特效按类别归类，方便你查阅。

    这些特效包括比较基础的switch流程控制、运算符、表达式、算法、链接与CSS、图片特效、IE浏览器相关、表彰处理、声音处理、时间与日期、检查与认证、Cookies等多方面的技巧代码，本手册将众多特效按类别归类，方便你...

    javascript经典特效---双人小游戏.rar

    【标题】：“javascript经典特效---双人小游戏.rar”揭示了这个压缩包文件包含了一个使用JavaScript编写的双人小游戏。JavaScript是一种广泛应用于Web开发的编程语言，尤其在实现网页交互效果和动态功能方面具有强大...

    javascript经典特效---数字排序.rar

    在网页中实现数字排序是JavaScript常见的功能之一，这通常涉及到数组的处理和算法的应用。在这个“数字排序.rar”压缩包中，我们很可能是看到了一个关于如何使用JavaScript进行数字排序的实例。 在JavaScript中，...

    js鼠标移上去变化图片特效，精简算法版本.zip

    在JavaScript编程中，实现鼠标悬停时图片变化的特效是一种常见的交互设计，它可以提升用户体验，增加网站或应用的趣味性。这个"js鼠标移上去变化图片特效，精简算法版本.zip"压缩包提供了实现这一功能的简洁代码示例...

    JavaScript特效制作的相册2.zip

    在这个名为"JavaScript特效制作的相册2.zip"的压缩包中，我们聚焦的是一个用JavaScript实现的相册功能，以及一种将图片破碎羽化的酷炫特效。 首先，JavaScript相册特效是网页设计中常见的功能，它允许用户浏览和...

    javascript经典特效---图形显示特效.rar

    在JavaScript中，图形显示特效主要依赖于DOM（Document Object Model）操作、CSS样式控制以及数学算法的应用。以下是一些关键知识点： 1. DOM操作：JavaScript能够通过DOM API（如getElementById, ...

    javascript经典特效---科学算命.rar

    JavaScript经典特效——科学算命，是一种利用JavaScript编程语言实现的互动网页应用，旨在为用户提供一种趣味性的娱乐体验。在这个应用中，用户可以输入个人信息，然后通过一系列算法得出预测结果，模拟传统的算命...

    javascript经典特效---jquery平滑交换真彩色的图片逐渐变为黑白图像的代码.rar

    本教程将探讨一个基于jQuery实现的经典特效：平滑地将真彩色的图片转换为黑白图像。这个效果可以为网页增添视觉吸引力，使用户体验更加丰富。 首先，我们需要理解基本的图像处理概念。在计算机中，图片是由像素组成...

    javascript经典特效---极具创意的小球.rar

    【标题】：“javascript经典特效---极具创意的小球” 在JavaScript的世界里，特效是网页动态表现力的重要组成部分。...对于学习JavaScript特效制作或者提升网页互动性的开发者来说，这是一个值得深入研究的案例。

    javascript特效之星球大战

    JavaScript特效在网页设计中起着至关重要的作用，它为用户带来动态、交互式的体验，让网页不再静态单一。"星球大战"主题的JavaScript特效更是深受开发者喜爱，它将经典电影元素融入网页，创造出引人入胜的视觉效果。...

    html5+JavaScript闪电特效.zip

    在这个“html5+JavaScript闪电特效.zip”压缩包中，我们很可能找到了一个利用这两种技术实现的闪电效果示例。这个效果可以用于游戏、动画或者任何需要吸引用户注意力的交互式网页设计中。 首先，HTML5是超文本标记...

    javascript经典特效---综合的搜索引擎 .rar

    【标题】：“JavaScript经典特效——综合的搜索引擎” 在JavaScript的世界里，实现一个综合的搜索引擎是一项技术挑战，也是网页开发中的重要一环。这个压缩包文件“javascript经典特效---综合的搜索引擎 .rar”显然...

Magicbox
Global site tag (gtag.js) - Google Analytics