토네이도에 관련된 자바스크립트 원문입니다.
<html>
<head>
<title>해피CGI</title>
<style type="text/css">
#screen {
position:absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
cursor: pointer;
z-index:100;
}
#screen img {
position: absolute;
}
</style>
<script type="text/javascript">
tor = {
O : 0,
xm : 0,
ym : 0,
//////////////////////////////////////////////
nbrParticles : 100,
speed : 6,
strength : .4,
radius : 4,
perspective : .5,
//////////////////////////////////////////////
mouse : function (e) {
if(tor.drag) {
if (window.event) e = window.event;
tor.xm = e.clientX - tor.nx;
tor.ym = e.clientY - tor.ny;
}
},
run : function () {
var o = tor.O;
do {
o.R += o.V;
o.style.left = Math.round(o.X + Math.cos(o.R) * o.r - o.W) + 'px';
o.style.top = Math.round(o.T + o.Y + Math.sin(o.R) * o.r * tor.perspective - o.H) + 'px';
if (o.parent){
o.X += (o.parent.X - o.X) * tor.strength;
o.Y += (o.parent.Y - o.Y) * tor.strength;
} else {
o.X = tor.xm;
o.Y = tor.ym;
}
o = o.next;
} while (o);
setTimeout(tor.run, 16);
},
resize : function () {
var o = tor.scr;
tor.nw = o.offsetWidth;
tor.nh = o.offsetHeight;
for (tor.nx = 0, tor.ny = 0; o != null; o = o.offsetParent) {
tor.nx += o.offsetLeft;
tor.ny += o.offsetTop;
}
},
zIndex : function () {
var o = tor.O;
var i = 0;
tor.zI = !tor.zI;
do {
o.style.zIndex = tor.zI ? 1000 - i++ : 1000 + i++;
o = o.next;
} while (o);
},
init : function () {
this.scr = document.getElementById('screen');
this.scr.onselectstart = function () { return false; }
this.scr.ondrag = function () { return false; }
this.scr.onmousedown = function (e) {
tor.drag = true;
tor.scr.style.cursor = "move";
tor.mouse(e);
return false;
}
this.scr.onmouseup = function () {
tor.drag = false;
tor.scr.style.cursor = "pointer";
return false;
}
this.resize();
var O;
var img = document.getElementById('particles').getElementsByTagName('img');
for (var i = 0; i < this.nbrParticles; i++) {
var o = document.createElement('img');
if (i > 0) {
O.next = o;
o.parent = O;
} else this.O = o;
var P = img[Math.floor(i*(img.length/this.nbrParticles))];
o.src = P.src;
o.r = tor.radius * i * i / this.nbrParticles + 5;
o.W = P.width * .5;
o.H = P.height * .5;
o.T = (-this.nh / 1.8) + (this.nh * 8 / (o.r + 10));
o.R = Math.random() * 2 * Math.PI;
o.X = this.nw / 2;
o.Y = tor.nh * 2;
o.V = this.speed / o.r;
this.scr.appendChild(o);
O = o;
}
tor.xm = tor.nw /2;
tor.ym = tor.nh * .9;
tor.run();
}
}
onload = function() {
document.onmousemove = function (e) { tor.mouse(e); }
onresize = tor.resize;
tor.init();
}
</script>
</head>
<body>
<div id="screen"></div>
<form>
<input type="checkbox" onclick="tor.zIndex()"> inner/outer<br>
stiffness:<input onclick="tor.strength=.2" type="radio" name="str">
<input onclick="tor.strength=.4" type="radio" name="str" checked>
<input onclick="tor.strength=.6" type="radio" name="str">
</form>
<div id="particles" style="visibility:hidden">
<img alt="" src="http://www.blueb.co.kr/SRC/javascript/image1/star1.gif">
<img alt="" src="http://www.blueb.co.kr/SRC/javascript/image1/star2.gif">
<img alt="" src="http://www.blueb.co.kr/SRC/javascript/image1/star3.gif">
<img alt="" src="http://www.blueb.co.kr/SRC/javascript/image1/star4.gif">
</div>
</body>
</html>
|
