スピン３

[概要]
マウスカーソルのまわりを点が回る。

[参照]
Kurt's DHTMLより

　sample

　　　

　source

<HTML>
<HEAD>
<TITLE>スピン</TITLE>
<BODY>
<script language="JavaScript">
<!--
/*----------初期設定----------*/
//リング色（２つ以上ならいくつでもいい）
colours = new Array('ff00ff','00ff00','0000ff','005500');
//リングを構成する点の数
dots=12;
//幅と高さ
hght=70;         //高さ
wdth=70;         //幅
//点の大きさ
dotsize=3;
//回転とひねりの速さ
step=0.05;
//マウスについてくるスピード
delay=0.1;

//Alter nothing past here!!!
dstrbt=360/dots;
currStep=0;
ypos=0;       xpos=0;
count1=0;   count2=0;
move=1;
ny=0;          nx=0;
ns=(document.layers);
ie=(document.all);
if (ns){
    for (i=0; i < dots; i++){
        document.write('<layer name="N'+i+'" left=0 top=0 bgcolor=#'+colours[0]+' clip="0,0,'+dotsize+','+dotsize+'"></layer>');
    }
}
if (ie){
    document.write('<div id="S" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=0; i < dots; i++){
        document.write('<div id="E" style="position:absolute;top:0px;left:0px;width:'+dotsize+'px;height:'+dotsize+'px;background:#'+colours[0]+';font-size:'+dotsize+'px"></div>');
    }
    document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

/*----------メイン----------*/
if (ns||ie)MouseFollow();

/*----------関数----------*/
function Mouse(evnt){
    ypos = (document.layers)?evnt.pageY:event.y;
    xpos = (document.layers)?evnt.pageX:event.x;
}

if (ns)window.onMouseMove=Mouse;
if (ie)document.onmousemove=Mouse;
var D=null;

function TwistnSpin(){
    if (ie) S.style.top=document.body.scrollTop;
    for (i=0; i < dots; i++){
        if (ns)D=document.layers["N"+i];
        if (ie)D=E[i].style; 
        D.top=ny+hght*Math.cos(currStep+i*dstrbt*Math.PI/180)*Math.sin(currStep/2);
        D.left=nx+wdth*Math.sin(currStep+i*dstrbt*Math.PI/180)*Math.cos(1+currStep/2);
    }
    currStep-=step;
}

function colourStep(){
    count1+=move;
    if (count1 >= dots) {count1=0;count2+=move}
    if (count2 == colours.length) count2=0;
    if (ns) document.layers["N"+count1].bgColor=colours[count2];
    if (ie) E[count1].style.background=colours[count2];
}

function MouseFollow(){
    ay = ny+=(ypos-ny)*delay;
    ax = nx+=(xpos-nx)*delay;
    TwistnSpin();
    colourStep();
    setTimeout('MouseFollow()',10);
}
//-->
</script>
</BODY>
</HTML>

※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。

　戻る