sampleブラックホールⅡ！？
[概要]
マウスに画像が吸収されていく
[参照]
Kurt's
DHTMLより
| sample |
 source |
<HTML>
<HEAD>
<TITLE>ブラックホール</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
/****** 変更可能個所 *****/
pict = "画像のURL";
//画像のアドレス
amount = 10;
//画像の数
speed=5;
//吸収のスピード
/****** 変更不可 *****/
ns=(document.layers)?1:0;
Y=0,X=0,ypos=0,xpos=0,ybase=new Array(),xbase=new Array();
angle = new Array(),divTop= new Array(),divLeft=new Array();
DocHeight=(document.layers)?window.innerHeight:window.document.body.offsetHeight;
DocWidth=(document.layers)?window.innerWidth:window.document.body.offsetWidth;
//initial layer placement!
for (i=0; i < amount; i++){
divTop[i]=Math.round(Math.random()*DocHeight);
divLeft[i]=Math.round(Math.random()*DocWidth);
}
if (ns){
for (i = 0; i < amount; i++){
document.write('<layer name=nsd'+i+' top=0 left=0><IMG src="'+pict+'"></layer>');
}
window.captureEvents(Event.MOUSEMOVE);
function nsMouse(evnt){
ypos = evnt.pageY-20;
xpos = evnt.pageX-10;
}
window.onMouseMove = nsMouse;
}
else{
document.write('<div id="hldr" style="position:absolute;top:0px;left:0px">')
document.write('<div style="position:relative">')
for (i=0; i < amount; i++){
document.write('<div id=ied
style="position:absolute;top:0px;left:0px;"><IMG src="'+pict+'"></div>')
}
document.write('</div></div>')
function ieMouse(){
ypos = event.y-20;
xpos = event.x-10;
}
document.onmousemove = ieMouse;
}
function GoToMouse(){
var DocHeight=(document.layers)?window.innerHeight:window.document.body.offsetHeight;
var DocWidth=(document.layers)?window.innerWidth:window.document.body.offsetWidth;
var iscrll=(document.all)?document.body.scrollTop:0;
var nscrll=(document.layers)?window.pageYOffset:0;
if (!ns)hldr.style.top=iscrll;
for (i=0; i < amount; i++){
Y = ypos - divTop[i];
X = xpos - divLeft[i];
angle[i] = Math.round(Math.atan2(Y,X) * 180/Math.PI);
if (angle[i] < 0) angle[i] += 360;
ybase[i]=Math.round(Math.random()*DocHeight);
xbase[i]=Math.round(Math.random()*DocWidth);
rep=Math.round(Math.random() * 3);
extra=Math.round(Math.random() * 200)
if (rep == 3)xbase[i] =-extra;
if (rep == 2)xbase[i] =DocWidth+extra;
if (rep == 1)ybase[i] =-extra;
if (rep == 0)ybase[i] =DocHeight;
y = Math.round(speed*Math.sin(angle[i]*Math.PI/180));
x = Math.round(speed*Math.cos(angle[i]*Math.PI/180));
divTop[i]+=y;
divLeft[i]+=x;
if ((divLeft[i] > xpos-speed) && (divLeft[i] < xpos+speed/1.5) && (divTop[i] >= ypos-speed/1.5) && (divTop[i] <= ypos+speed/1.5)){
divTop[i]=ybase[i]+nscrll;divLeft[i]=xbase[i]
}
var layer=(document.layers)?document.layers['nsd'+i]:ied[i].style;
layer.top=divTop[i];layer.left=divLeft[i];
}
S=setTimeout('GoToMouse()',10);
}
window.onload=GoToMouse;
//-->
</SCRIPT>
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
戻る