dhteumeuleu » rubble

rubble

On January 13, 2000, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/target.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>rubble - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #000; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
	} 
	#sq { 
		left: -2000px; 
		position: absolute; 
	} 
	#vs { 
		height: 111px; 
		left: -4000px; 
		position: absolute; 
		width: 148px; 
	} 
	#sqi { 
		position: absolute; 
		width: 304px; 
		filter: alpha(opacity=100); 
	} 
	#vsx { 
		height: 111px; 
		overflow: hidden; 
		position: absolute; 
		width: 148px; 
		border:#666 dotted 1px; 
	} 
	#vs span { 
		position: absolute; 
	} 
	#t0 { 
		height: 4000px; 
		left: 75px; 
		top: -2000px; 
		width: 1px; 
		border-left:#666 dotted 1px; 
	} 
	#t1 { 
		width: 4000px; 
		top: 56px; 
		left: -2000px; 
		height: 1px; 
		font-size:0px; 
		border-top:#666 dotted 1px; 
	} 
</style> 
 
<script type="text/javascript"> 
// =========================================================== 
// Gerard Ferrandez - janv 2000 
// http://www.dhteumeuleu.com 
// =========================================================== 
document.onselectstart = new Function("return false"); 
 
var object = new Array(); 
var sw,sh,sw2,sh2,sx,sy,svx,svy,xm,ym,ax,ay,nx,ny,nxb,nyb; 
 
function resize() { 
	nx=document.body.offsetWidth; 
	ny=document.body.offsetHeight; 
} 
onresize = resize; 
 
function CObj(N,obj,res,lim,inv){ 
	obj.style.visibility="visible"; 
	this.sw   = obj.offsetWidth; 
	this.sw2  = this.sw/2; 
	this.sh   = obj.offsetHeight; 
	this.sh2  = this.sh/2; 
	this.sx   = 0; 
	this.sy   = 0; 
	this.svx  = 4; 
	this.svy  = 8; 
	this.ax   = 0; 
	this.ay   = 0; 
	this.sqi  = document.getElementById("sqi").style; 
	this.anim = function () { 
		if(inv){ 
			var xmo = xm; 
			var ymo = ym; 
		} else { 
			var xmo = nx - xm; 
			var ymo = ny - ym; 
		} 
		this.svx = res*this.svx-(this.sx-xmo+this.sw2+this.ax)/200; 
		this.svy = res*this.svy-(this.sy-ymo+this.sh2+this.ay)/200; 
		if(lim){ 
			if(this.sx>-100 && this.svx>0) { 
				this.svx=this.svx/2; 
				if(this.sx>=0)this.svx=0; 
			} else if(this.sx+this.sw<nx+100 && this.svx<0){ 
				this.svx=this.svx/2; 
				if(this.sx+this.sw<=nx)this.svx=0; 
			} 
			if(this.sy>-100 && this.svy>0) { 
				this.svy=this.svy/2; 
				if(this.sy>=0)this.svy=-this.svy; 
			} else if(this.sy+this.sh<ny+100 && this.svy<0){ 
				this.svy=this.svy/2; 
				if(this.sy+this.sh<=ny)this.svy=0; 
			} 
		} 
		this.sx += this.svx; 
		this.sy += this.svy; 
		obj.style.left = Math.round(this.sx)+"px"; 
		obj.style.top  = Math.round(this.sy)+"px"; 
		if(N == 1){ 
			this.sqi.left = Math.round(-this.sx*152/(nx-152))+"px"; 
			this.sqi.top  = Math.round(-this.sy*113/(ny-113))+"px"; 
		} 
		setTimeout(function() { 
	  		object[N].anim(); 
		},16); 
	} 
	this.anim(); 
} 
 
onload = function() { 
	resize(); 
	xm = nx/2; 
	ym = ny/2; 
	document.onmousemove = function(e){ 
		if (window.event) e = window.event; 
		xm = nx - (e.x || e.clientX) + 4; 
		ym = ny - (e.y || e.clientY) + 4; 
	} 
	object[0] = new CObj(0,document.getElementById("sq"),0.98,true,true); 
	object[1] = new CObj(1,document.getElementById("vs"),0.98,false,false); 
} 
</script> 
</head> 
 
<body> 
 
 
<img id="sq" src="../images/blox_07_28_01.jpg"> 
 
<span id="vs"> 
	<span id="t0"></span> 
	<span id="t1"></span> 
	<span id="vsx"> 
		<img id="sqi" src="../images/blox_07_28_01.jpg"> 
	</span> 
</span> 
 
</body> 
</html>

Tagged with: zoom