マウスの移動

◆マウスの移動◆
┣１.マウスにくっついてくる画像　　　・・・・　マウスカーソルの横に画像をくっつける。
┣２.マウスにくっついてくる文字列１　　　・・・・　マウスカーソルに文字列がついてくる。
┣３.マウスにくっついてくる文字列２　　　・・・・　マウスの後に文字列が軌跡を残してついてくる。
┣４.マウスにくっついてくる文字列３　　　・・・・　マウスの後に文字列が順番についてくる。
┣５.標的　　　・・・・　マウスが標的になる効果。
┣６.３Dサークル　　・・・・　マウスが中心となった３Dサークルを描く。
 ┣７.マウスシューティング　　　・・・・　マウスをめがけて星が飛んでくる。
┣８.パルススピン　　・・・・　マウスを中心として円を描く。
┗９.トリオ　　　・・・・　３色の点がマウスの周りを回る。

　

マウスにくっついてくる画像

■■１■■
 [概要]
マウスカーソルの横に画像をくっつける

[参照]

[ソース]
<HTML>
<TITLE>マウスについてくる画像</TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function moveImg(){
    //画像位置設定
    x = event.clientX+document.body.scrollLeft+10; //左からの位置
    y = event.clientY+document.body.scrollTop+10; //上からの位置
    //画像セット
    img.style.left = x;
    img.style.top = y;
    img.style.visibility = "visible";
}
// -->
</SCRIPT>
</HEAD>
<BODY onMouseMove="moveImg()">
<!--表示させたい画像-->
<IMG src="画像のＵＲＬ" id="img" style={position:absolute;visibility:hidden;}>
</BODY>
</HTML>

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

　

マウスにくっついてくる文字列１

■■２■■
 [概要]
マウスカーソルの横に文字列をくっつける

[参照]

[ソース]
<HTML>
<TITLE>マウスについてくる文字列</TITLE>
<HEAD>
<!--マウスについてくるメッセージのスタイル-->
<STYLE>
.msgstyle {color:blue; font-size:14pt; font-weight:bold; position:absolute; visibility:hidden;}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
//ついてくる文字列
message = "好きな文字列";

function moveImg(){
    //画像位置設定
    x = event.clientX+document.body.scrollLeft+10;     //左からの位置
    y = event.clientY+document.body.scrollTop+10;     //上からの位置
    //画像セット
    msg.innerHTML = message;
    msg.style.left = x;
    msg.style.top = y;
    msg.style.visibility = "visible";
}
// -->
</SCRIPT>
</HEAD>
<BODY onMouseMove="moveImg()">
<!--表示させたい画像-->
<SPAN id=msg class=msgstyle></SPAN>
</BODY>
</HTML>

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

　

マウスにくっついてくる画像

■■３■■
 [概要]
マウスの後を文字列が軌跡を残してついてくる

[参照]

[ソース]
<HTML>
<HEAD>
<TITLE>マウスについてくる文字列</TITLE>
<!--マウスについてくるメッセージのスタイル-->
<STYLE>
.msgstyle {font-size:14pt; font-weight:bold; position:absolute; top:-50; left:-50; visibility:hidden}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--

//変数
var flag = 0;
var flag2 = 0;
//表示するメッセージ(HTML可)
//"★"とかにするとまた違った感じにかっこいいかも・・・
var message = "好きな文字列";
//文字列の表示数
num = 5;
//文字位置
var x, y;                         //先頭
var x_pos = new Array();     //残り
var y_pos = new Array();

//位置取得
function init() {
    if(flag2 == 0){
        for (i = num-1; i >= 0; i--) {
            msg.innerHTML += "<span id=\"span"+i+"\" class=\"msgstyle\" style={color:rgb(255,"+255/num*i+","+255/num*i+");}>"+message+"<\/span>";
            document.all["span"+i].style.visibility = "visible";
        }
        flag2 = 1;
    }
    //文字の先頭の位置セット
    x = document.body.scrollLeft + event.clientX;
    y = document.body.scrollTop + event.clientY;
    flag = 1;
}

//文字を表示
function setPoint() {
    if (flag == 1) {
    //各文字位置設定
        for (i = num-1; i >= 0; i--) {
            x_pos[i] = x_pos[i - 1];
            y_pos[i] = y_pos[i - 1];
        }
        x_pos[0] = x;
        y_pos[0] = y;
        //文字をセット
        for (i = 0; i < num; i++) {
            document.all["span"+i].style.posLeft = x_pos[i];
            document.all["span"+i].style.posTop = y_pos[i];
        }
    }
    //繰り返し
    var timer = setTimeout("setPoint()", 20);
}

//-->
</SCRIPT>
</HEAD>
<body onload="setPoint()" onmousemove="init()">
<SPAN id="msg"></SPAN>
</BODY>
</HTML>

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

　

マウスにくっついてくる文字列３

■■４■■
 [概要]
マウスに文字列が順番についてくる

[参照]

[ソース]
<HTML>
<HEAD>
<TITLE>マウスについてくる文字列</TITLE>
<!--マウスについてくるメッセージのスタイル-->
<STYLE>
.msgstyle {color:blue; font-size:14pt; font-weight:bold; position:absolute; top:-50; left:-50; visibility:hidden}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--

//変数
var flag = 0;
var flag2 = 0;
//表示するメッセージ
var message = "ようこそ！ヨッシーの”ホームページを作ろう！”へ！！";
//文字と文字の間隔
var steps = 18;
//文字位置
var x, y;                         //先頭
var x_pos = new Array();     //残り
var y_pos = new Array();

//メッセージを分けて代入
message = message.split("");

//位置取得
function init() {
    if(flag2 == 0){
        for (i = 0; i <= message.length-1; i++) {
            msg.innerHTML += "<span id=\"span"+i+"\" class=\"msgstyle\">"+message[i]+"<\/span>";
            document.all["span"+i].style.visibility = "visible";
        }
        flag2 = 1;
    }
    //文字の先頭の位置セット
    x = document.body.scrollLeft + event.clientX;
    y = document.body.scrollTop + event.clientY;
    flag = 1;
}

//文字を表示
function setPoint() {
    if (flag == 1) {
        //各文字位置設定
        for (i = message.length - 1; i >= 1; i--) {
            x_pos[i] = x_pos[i - 1] + steps;
            y_pos[i] = y_pos[i - 1];
        }
        x_pos[0] = x + steps;
        y_pos[0] = y;
        //文字をセット
        for (i = 0; i < message.length - 1; i++) {
            document.all["span"+i].style.posLeft = x_pos[i];
            document.all["span"+i].style.posTop = y_pos[i];
        }
    }
    //繰り返し
    var timer = setTimeout("setPoint()", 10);
}

//-->
</SCRIPT>
</HEAD>
<body onload="setPoint()" onmousemove="init()">
<SPAN id="msg"></SPAN>
</BODY>
</HTML>

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

　

標的

■■５■■
 [概要]
マウスが標的になる効果

[参照]
 Dynamic Driveより

[ソース]
<HTML>
<HEAD>
<TITLE>標的</TITLE>
<STYLE TYPE="text/css">
<!--
#yoko, #tate{
position:absolute;
left:0;
top:0;
width:1px;
height:1px;
background-color:#0000FF;
z-index:100;
font-size:1px;
}
//-->
</STYLE>
</HEAD>
<BODY>
<DIV ID="yoko" STYLE="width:expression(document.body.clientWidth-2)"></DIV>
<DIV ID="tate" STYLE="height:expression(document.body.clientHeight-2)"></DIV>
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.all&&!window.print){
yoko.style.width=document.body.clientWidth-2
tate.style.height=document.body.clientHeight-2
}

function followmouse(){
	yoko.style.pixelTop=document.body.scrollTop+event.clientY+1
  	tate.style.pixelTop=document.body.scrollTop
  	if (event.clientX<document.body.clientWidth-2){
    	tate.style.pixelLeft=document.body.scrollLeft+event.clientX+1
	}
	else{
  		tate.style.pixelLeft=document.body.clientWidth-2
	}
}
if (document.all) document.onmousemove=followmouse
//-->
</SCRIPT>
</HTML>

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

　

３Dサークル

■■６■■
 [概要]
マウスが中心となった３Dサークルを描く

[参照]
 Kurt's DHTMLより

[ソース]
<HTML>
<HEAD>
<TITLE>３Dサークル</TITLE>
</HEAD>
<!--背景色は黒っぽい色のほうがいいかも-->
<BODY bgcolor="black">
<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,1,1"></LAYER>
<LAYER NAME="a7" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a8" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a9" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a10" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a11" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a12" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000ff" CLIP="0,0,2,2"></LAYER>
<LAYER NAME="a13" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,3,3"></LAYER>
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.all){
  with (document){
    write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
    write('<div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div>')
    write('<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div>')
    write('<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div>')
    write('<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div>')
    write('<div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:1px;visibility:visible"></div>')
    write('<div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:1px;visibility:visible"></div>')
    write('<div style="position:relative;width:2px;height:2px;background:#FF0000;font-size:1px;visibility:visible"></div>')
    write('<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>')
    write('<div style="position:relative;width:3px;height:3px;background:#fff000;font-size:2px;visibility:visible"></div>')
    write('<div style="position:relative;width:3px;height:3px;background:#ffa000;font-size:2px;visibility:visible"></div>')
    write('<div style="position:relative;width:3px;height:3px;background:#ff00ff;font-size:2px;visibility:visible"></div>')
    write('<div style="position:relative;width:4px;height:4px;background:#00ff00;font-size:2px;visibility:visible"></div>')
    write('<div style="position:relative;width:4px;height:4px;background:#0000ff;font-size:2px;visibility:visible"></div>')
    write('<div style="position:relative;width:4px;height:4px;background:#FF0000;font-size:3px;visibility:visible"></div>')
    write('</div>')
  }
}

//回転体の色
var Clrs=new Array(6)
Clrs[0]='ff0000';
Clrs[1]='00ff00';
Clrs[2]='000aff';
Clrs[3]='ff00ff';
Clrs[4]='fff000';
Clrs[5]='fffff0';
if (document.layers){window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
if (document.all){
  function MoveHandler(){
    Xpos = document.body.scrollLeft+event.x;
    Ypos = document.body.scrollTop+event.y;
  }
  document.onmousemove = MoveHandler;
}
else if (document.layers){
  function xMoveHandler(evnt){
    Xpos = evnt.pageX;
    Ypos = evnt.pageY;
  }
  window.onMouseMove = xMoveHandler;
}
function animateLogo() {
  if (document.all){
    //円軌道の横と縦の幅を設定
	yBase = window.document.body.offsetHeight/8;
    xBase = window.document.body.offsetWidth/8;
  }
  else if (document.layers){
    yBase = window.innerHeight/4;
    xBase = window.innerWidth/4;
  }
  if (document.all){
    for ( i = 0 ; i < starsDiv.all.length ; i++ ){
      step=3;
      starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200);
      starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400);
      for (ai=0; ai < Clrs.length; ai++){
        var c=Math.round(Math.random()*[ai]);
      }
      starsDiv.all[i].style.background=Clrs[c];
    }
  }
  else if (document.layers){
    for ( j = 0 ; j < 14 ; j++ ){
      step = 4;
      var templayer="a"+j
      document.layers[templayer].top = Ypos + yBase*Math.sin((currStep + j*4)/12)*Math.cos(0.7+currStep/200);
      document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400);
      for (aj=0; aj < Clrs.length; aj++){
        var c=Math.round(Math.random()*[aj]);
      }
      document.layers[templayer].bgColor=Clrs[c]; 
    }
  }
  currStep+= step;
  setTimeout("animateLogo()", 10);
}
animateLogo();
//-->
</SCRIPT>
</BODY>
</HTML>

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

　

マウスシューティング

■■７■■
 [概要]
マウスをめがけて星が飛んでくる

[参照]
 Kurt's DHTMLより

[ソース]
<HTML>
<HEAD>
<TITLE>マウスシューティング</TITLE>
</HEAD>
<!--背景は暗い方がいい-->
<BODY bgcolor="black">
<SCRIPT LANGUAGE="JavaScript">
<!--
  var speed=20,divTop=0,divLeft=0,angle=0,ypos=0,xpos=0,amount=13;
  if (document.layers){
    for (i = 0; i < amount; i++){
      document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/3+' height='+i/3+' bgcolor=#ffffff></layer>');
    }
    window.captureEvents(Event.MOUSEMOVE);
    function nsMouse(evnt){
      xpos=evnt.pageX;
      ypos=evnt.pageY;
    }
    window.onMouseMove = nsMouse;
  }
  else if (document.all){
    document.write('<div style="position:absolute;top:0px;left:0px">');
    document.write('<div style="position:relative">');
    for (i = 0; i < amount; i++){
      document.write('<div id=k style="position:absolute;top:0px;left:0px;width:'+i/3+';height:'+i/3+';background:#ffffff;font-size:'+i/3+'"></div>')
    }
    document.write('</div></div>');
    function iMouse(){xpos=event.x;ypos=document.body.scrollTop+event.y}
    document.onmousemove = iMouse;
  }
function getAngle(){
  Y = ypos - divTop;
  X = xpos - divLeft;
  angle = Math.round(Math.atan2(Y,X) * 180/Math.PI);
  if (angle < 0)angle += 360;
}
function bomb(){
  if (document.layers){
    Yscroll=window.pageYOffset;
    ybase=Math.round(Math.random()*window.innerHeight);
    xbase=Math.round(Math.random()*window.innerWidth);
    yybase=window.innerHeight-10;
    xxbase=window.innerWidth-10;
  }
  else if (document.all){
    Yscroll=document.body.scrollTop;
    ybase=Math.round(Math.random()*window.document.body.offsetHeight);
    xbase=Math.round(Math.random()*window.document.body.offsetWidth);
    xxbase=window.document.body.offsetWidth-10;
    yybase=window.document.body.offsetHeight-10;
  }
  if ((xbase > 10 && xbase < xxbase) && (ybase > 10 && ybase < yybase))
    bomb();
  else{
    if ((divLeft > xpos-speed/1.5) && (divLeft < xpos+speed/1.5) && (divTop >= ypos-speed/1.5) && (divTop <= ypos+speed/1.5)){
      divTop=ybase+Yscroll;
      divLeft=xbase
    }
    y = Math.round(speed*Math.sin(angle*Math.PI/180));
    x = Math.round(speed*Math.cos(angle*Math.PI/180));
    divTop+=y;
    divLeft+=x;
    getAngle();
    T=setTimeout('bomb()',20);
  }
}
function Split(){
  //飛んでくる星の色
    Clrs=new Array('fff000','ffffff','ffa500')
  var ntscp=document.layers,msie=document.all;

  if (document.layers){
    for (i = 0; i < amount; i++){
      if (i < amount-1){
        ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;
        ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left
      }
      else{
        ntscp['nsa'+i].top=divTop;
        ntscp['nsa'+i].left=divLeft
      }
    }
  }
  else if (document.all){
    for (i = 0; i <  amount; i++){
      if (i < amount-1){
        msie.k[i].style.top=msie.k[i+1].style.top;
        msie.k[i].style.left=msie.k[i+1].style.left
      }
      else{
        msie.k[i].style.top=divTop;
        msie.k[i].style.left=divLeft
      }
    }
  }
  for (i=0; i < amount-1; i++){
    for (n=0; n < Clrs.length; n++){
      var x=Math.round(Math.random()*n)
    }
    if (document.layers){ntscp['nsa'+i].bgColor=Clrs[x]}
    else if (document.all){msie.k[i].style.background=Clrs[x]}
  }
  setTimeout("Split()",20);
}
function StArT(){bomb();Split()}
  window.onload=StArT;
//-->
</SCRIPT>
</BODY>
</HTML>

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

　

パルススピン

■■８■■
 [概要]
マウスを中心としてスピンを描く

[参照]
 Kurt's DHTMLより

[ソース]

<HTML>
<HEAD>
<TITLE>パルススピン</TITLE>
</HEAD>
<BODY bgcolor="black">
<SCRIPT LANGUAGE="JavaScript">
<!--
	//回転させたい７つの色
	color = new Array("#FF8000","#FFFF00","#00FF00","#0000FF","#FF0000","#FF00FF","#FFFFFF");
	//回転させたい点の大きさ
	ball_size = 4;
	var speed;
	var RunTime = 0;
	var Xpos = 0;
	var Ypos = 0;
	var pulse=25;
	var cnter=70;
	var _y;
	if (document.layers){
		document.write('<LAYER NAME="a0" LEFT=10 TOP=10 BGCOLOR="'+color[0]+'" CLIP="0,0,2,2"></LAYER>'
		+'<LAYER NAME="a1" LEFT=10 TOP=10 BGCOLOR="'+color[2]+'" CLIP="0,0,'+ball_size+','+ball_size+'"></LAYER>'
		+'<LAYER NAME="a2" LEFT=10 TOP=10 BGCOLOR="'+color[3]+'" CLIP="0,0,'+ball_size+','+ball_size+'"></LAYER>'
		+'<LAYER NAME="a3" LEFT=10 TOP=10 BGCOLOR="'+color[4]+'" CLIP="0,0,'+ball_size+','+ball_size+'"></LAYER>'
		+'<LAYER NAME="a4" LEFT=10 TOP=10 BGCOLOR="'+color[5]+'" CLIP="0,0,'+ball_size+','+ball_size+'"></LAYER>'
		+'<LAYER NAME="a5" LEFT=10 TOP=10 BGCOLOR="'+color[6]+'" CLIP="0,0,'+ball_size+','+ball_size+'"></LAYER>'
		+'<LAYER NAME="a6" LEFT=10 TOP=10 BGCOLOR="'+color[7]+'" CLIP="0,0,'+ball_size+','+ball_size+'"></LAYER>');
		window.captureEvents(Event.MOUSEMOVE);
		function xMoveHandler(evnt){
		  Xpos = evnt.pageX;
		  Ypos = evnt.pageY;
		}
 	   window.onMouseMove = xMoveHandler;
  	}
  	else if (document.all){
    	document.write('<div id="ieDiv" style="position:absolute;top:0px;left:0px">'
      	+'<div id="c" style="position:relative">'
      	+'<div style="position:absolute;top:0px;left:0px;width:'+ball_size+'px;height:'+ball_size+'px;background:'+color[0]+';font-size:2px"></div>'
      	+'<div style="position:absolute;top:0px;left:0px;width:'+ball_size+'px;height:'+ball_size+'px;background:'+color[1]+';font-size:2px"></div>'
      	+'<div style="position:absolute;top:0px;left:0px;width:'+ball_size+'px;height:'+ball_size+'px;background:'+color[2]+';font-size:2px"></div>'
      	+'<div style="position:absolute;top:0px;left:0px;width:'+ball_size+'px;height:'+ball_size+'px;background:'+color[3]+';font-size:2px"></div>'
      	+'<div style="position:absolute;top:0px;left:0px;width:'+ball_size+'px;height:'+ball_size+'px;background:'+color[4]+';font-size:2px"></div>'
      	+'<div style="position:absolute;top:0px;left:0px;width:'+ball_size+'px;height:'+ball_size+'px;background:'+color[5]+';font-size:2px"></div>'
      	+'<div style="position:absolute;top:0px;left:0px;width:'+ball_size+'px;height:'+ball_size+'px;background:'+color[6]+';font-size:2px"></div>'
      	+'</div>'
      	+'</div>');
		function MoveHandler(){
		  	Xpos = document.body.scrollLeft+event.x;
		  	Ypos = document.body.scrollTop+event.y;
		}
    	document.onmousemove = MoveHandler;
  	}
function sv3(){
  	if (RunTime<0.0550)
    	speed=0.001;
  	if (document.layers){
    	for (i=0;i<7;i++){
      	var ntscp="a"+i
	      	document.layers[ntscp].top=Ypos+cnter*Math.cos((RunTime+i*4.5)/5)*Math.sin((RunTime)*150);
	      	document.layers[ntscp].left=Xpos+cnter*Math.sin((RunTime+i*4.5)/5)*Math.sin((RunTime)*150);
    	}
  	}
  	else if (document.all){
	    for (i=0;i<ieDiv.all.c.all.length;i++){
	      	ieDiv.all.c.all[i].style.top=Ypos+cnter*Math.cos((RunTime+i*4.5)/5)*Math.sin((RunTime)*150);
	      	ieDiv.all.c.all[i].style.left=Xpos+cnter*Math.sin((RunTime+i*4.5)/5)*Math.sin((RunTime)*150);
	    }
  	}
  	RunTime+=speed;
  	stp=setTimeout('sv3()',10);
  	if (RunTime>0.0540){
    	speed+=0.002;
    	if (document.layers){
      		for (i=0;i<7;i++){
        		var ntscp="a"+i
        		document.layers[ntscp].top=Ypos+cnter*Math.cos((RunTime+i*4.5)/5)
        		document.layers[ntscp].left=Xpos+cnter*Math.sin((RunTime+i*4.5)/5)
      		}
    	}
    	else if (document.all){
      		for (i=0;i<ieDiv.all.c.all.length;i++){
       			ieDiv.all.c.all[i].style.top=Ypos+cnter*Math.cos((RunTime+i*4.5)/5)
        		ieDiv.all.c.all[i].style.left=Xpos+cnter*Math.sin((RunTime+i*4.5)/5)
      		}
    	} 
  	}
  	if (speed > 0.5){
    	speed=0.5;
    	cnter-=8;
  	}
  	if (document.layers)
    	_y=-window.innerHeight;
  	else if (document.all)
    	_y=-document.body.clientHeight;
  	if (cnter <= _y){
    	RunTime=0;
    	speed=0.001;
    	cnter=70;
  	}
}
  sv3();
//-->
</SCRIPT>
</BODY>
</HTML>

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

　

トリオ

■■９■■
 [概要]
３色の点がマウスの周りを回る

[参照]
 Kurt's DHTMLより

[ソース]
<HTML>
<HEAD>
<TITLE>パルススピン</TITLE>
</HEAD>
<BODY bgcolor="black">
<SCRIPT LANGUAGE="JavaScript">
<!--
//回転する３色の点
var a_Colour='ff0000';
var b_Colour='ffffff';
var c_Colour='0000ff';
//回転の大きさ
var Size=50;

var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.2;
if (document.layers){
   	window.captureEvents(Event.MOUSEMOVE);
	function nsMouse(evnt){
	  	xpos = window.pageYOffset+evnt.pageX+6;
	  	ypos = window.pageYOffset+evnt.pageY+16;
	}
   	window.onMouseMove = nsMouse;
}
else if (document.all){
	function ieMouse(){
		xpos = document.body.scrollLeft+event.x+6;
		ypos = document.body.scrollTop+event.y+16;
	}
   	document.onmousemove = ieMouse;
}
function swirl(){
  	for (i = 0; i < 3; i++){ 
    	YDummy[i]=ypos+Size*Math.cos(ThisStep+i*2)*Math.sin((ThisStep+i*25)/2);
    	XDummy[i]=xpos+Size*Math.sin(ThisStep+i*2)*Math.sin((ThisStep+i*25)/2)*Math.sin(ThisStep/4);
  	}
  	ThisStep+=step;
  	setTimeout('swirl()',10);
}
var amount=10;
	
if (document.layers){
	for (i = 0; i < amount; i++){
      	document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+a_Colour+'></layer>');
      	document.write('<layer name=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+b_Colour+'></layer>');
      	document.write('<layer name=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+c_Colour+'></layer>');
    }
}
else if (document.all){
	document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'
    +'<div id="IDiv" style="position:relative">');
    for (i = 0; i < amount; i++){
    	document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></div>');
      	document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></div>');
      	document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></div>');
    }
    document.write('</div></div>');
}
function prepos(){
  	var ntscp=document.layers;
  	var msie=document.all;
  	
	if (document.layers){
    	for (i = 0; i < amount; i++){
      		if (i < amount-1){
        		ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left;
		        ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)].left;
		        ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)].left;
      		}
      		else{
        		ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0];
        		ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1];
        		ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+i].left=XDummy[2];
      		}
    	}
  	}
  	else if (document.all){
    	for (i = 0; i <  amount; i++){
      		if (i < amount-1){
		        msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left;
		        msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left;
		        msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left;
	      	}
		    else{
		        msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];
		        msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];
	        	msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];
      		}
    	}
  	}
  	setTimeout("prepos()",10);
}
function Start(){
  	swirl(),prepos()
}
window.onload=Start;
//-->
</SCRIPT>
</BODY>
</HTML>

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

　戻る