戻る|
マウスの移動 |
◆マウスの移動◆ |
■■１■■
[概要]
マウスの周りを点がスピンする
[参照]
Kurt's
DHTMLより
[ソース]
<HTML>
<HEAD>
<TITLE>スピン１</TITLE>
</HEAD>
<BODY>
<script language="JavaScript">
<!--
/*----------初期設定----------*/
var ns=(document.layers)?1:0;
var step=1;
var cstep = 0;
var a=0;
var b=100;
var Xpos=0;
var Ypos=0;
var n=7;
//周りの点の数
var colours=new Array('000000','ff0000','00ff00','0000aa','aaaa00','ff00ff','00aaaa');
//点の大きさ
var ball_size = 4;
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
Ypos = (document.layers)?evnt.pageY:event.y;
Xpos = (document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
if (ns){
for (i=0; i < n; i++){
document.write('<LAYER NAME="nsstars'+i+'" TOP=-200 LEFT=0
BGCOLOR='+colours[i]+' CLIP="0,0,2,2"></LAYER>');
}
}
else{
document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');
for (i=0; i < n; i++){
document.write('<span id="iestars"
style="position:absolute;top:0;left:0;width:'+ball_size+'px;height:'+ball_size+'px;background:'+colours[i]+';font-size:2px"></span>');
}
document.write('</div></div>');
}
/*----------メインプログラム----------*/
MorphSpin();
/*----------関数----------*/
function MorphSpin(){
var wdth=(document.layers)?window.innerWidth-100:document.body.clientWidth-100;
var dot=(document.layers)?document.layers["nsstars"+0]:iestars[0].style;
for (i = 0; i < n; i++){
dot.top=Ypos+a*Math.cos((cstep+i*4.5)/5);
dot.left=Xpos+a*Math.sin((cstep+i*4.5)/5);
}
a+=1;
cstep+=step;
setTimeout('MorphSpin()',10);
for (i = 0; i < n; i++){
var dots=(document.layers)?document.layers["nsstars"+i]:iestars[i].style;
if (a >= 100){
a=100;
step=2.5;
dots.top=Ypos+a*Math.cos((cstep-100)*i/90);
dots.left=Xpos+a*Math.sin((cstep-100)*i/90);
}
if (cstep > 182){
step=0.5;
dots.top=Ypos+b*Math.cos(((cstep-182)+i*4.5)/5)*Math.cos((cstep-182)/5);
dots.left=Xpos+b*Math.sin(((cstep-182)+i*4.5)/5);
}
}
if (cstep > 210){
b-=10;
}
if (b < -wdth){
for (i = 0; i < n; i++){
(document.layers)?document.layers["nsstars"+i].top=-200:iestars[i].style.top=-200;
}
cstep=0;
step=1;
a=0;
b=100;
}
}
//-->
</script>
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■２■■
[概要]
マウスの周りを画像が回る
[参照]
Kurt's
DHTMLより
[ソース]
<HTML>
<HEAD>
<TITLE>スピン１</TITLE>
</HEAD>
<BODY>
<script language="JavaScript">
<!--
/*----------初期設定----------*/
var ns=(document.layers)?1:0;
var step=1;
var cstep = 0;
var a=0;
var b=100;
var Xpos=0;
var Ypos=0;
var n=7;
//回転する画像
var img = '画像のURL';
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
Ypos = (document.layers)?evnt.pageY:event.y;
Xpos = (document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
if (ns){
for (i=0; i < n; i++){
document.write('<LAYER NAME="nsstars'+i+'" TOP=-200 LEFT=0><IMG
SRC="'+img+'"></LAYER>');
}
}
else{
document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');
for (i=0; i < n; i++){
document.write('<img src="'+img+'"
id="iestars" style="position:absolute;top:-100px;left:-100px;">');
}
document.write('</div></div>');
}
/*----------メインプログラム----------*/
MorphSpin();
/*----------関数----------*/
function MorphSpin(){
var wdth=(document.layers)?window.innerWidth-100:document.body.clientWidth-100;
var dot=(document.layers)?document.layers["nsstars"+0]:iestars[0].style;
for (i = 0; i < n; i++){
dot.top=Ypos+a*Math.cos((cstep+i*4.5)/5);
dot.left=Xpos+a*Math.sin((cstep+i*4.5)/5);
}
a+=1;
cstep+=step;
setTimeout('MorphSpin()',10);
for (i = 0; i < n; i++){
var dots=(document.layers)?document.layers["nsstars"+i]:iestars[i].style;
if (a >= 100){
a=100;
step=2.5;
dots.top=Ypos+a*Math.cos((cstep-100)*i/90);
dots.left=Xpos+a*Math.sin((cstep-100)*i/90);
}
if (cstep > 182){
step=0.5;
dots.top=Ypos+b*Math.cos(((cstep-182)+i*4.5)/5)*Math.cos((cstep-182)/5);
dots.left=Xpos+b*Math.sin(((cstep-182)+i*4.5)/5);
}
}
if (cstep > 210){
b-=10;
}
if (b < -wdth){
for (i = 0; i < n; i++){
(document.layers)?document.layers["nsstars"+i].top=-200:iestars[i].style.top=-200;
}
cstep=0;
step=1;
a=0;
b=100;
}
}
//-->
</script>
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■３■■
[概要]
マウスの周りを複数の画像が回る
[参照]
Kurt's
DHTMLより
[ソース]
<HTML>
<HEAD>
<TITLE>スピン１</TITLE>
</HEAD>
<BODY>
<script language="JavaScript">
<!--
/*----------初期設定----------*/
var ns=(document.layers)?1:0;
var step=1;
var cstep = 0;
var a=0;
var b=100;
var Xpos=0;
var Ypos=0;
var n=7;
//回転する画像
var img = new Array('画像のURL1','画像のURL2','画像のURL3','画像のURL4','画像のURL5','画像のURL6','画像のURL7');
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
Ypos = (document.layers)?evnt.pageY:event.y;
Xpos = (document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
if (ns){
for (i=0; i < n; i++){
document.write('<LAYER NAME="nsstars'+i+'" TOP=-200 LEFT=0><IMG
SRC="'+img[i]+'"></LAYER>');
}
}
else{
document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');
for (i=0; i < n; i++){
document.write('<img src="'+img[i]+'"
id="iestars" style="position:absolute;top:-100px;left:-100px;">');
}
document.write('</div></div>');
}
/*----------メインプログラム----------*/
MorphSpin();
/*----------関数----------*/
function MorphSpin(){
var wdth=(document.layers)?window.innerWidth-100:document.body.clientWidth-100;
var dot=(document.layers)?document.layers["nsstars"+0]:iestars[0].style;
for (i = 0; i < n; i++){
dot.top=Ypos+a*Math.cos((cstep+i*4.5)/5);
dot.left=Xpos+a*Math.sin((cstep+i*4.5)/5);
}
a+=1;
cstep+=step;
setTimeout('MorphSpin()',10);
for (i = 0; i < n; i++){
var dots=(document.layers)?document.layers["nsstars"+i]:iestars[i].style;
if (a >= 100){
a=100;
step=2.5;
dots.top=Ypos+a*Math.cos((cstep-100)*i/90);
dots.left=Xpos+a*Math.sin((cstep-100)*i/90);
}
if (cstep > 182){
step=0.5;
dots.top=Ypos+b*Math.cos(((cstep-182)+i*4.5)/5)*Math.cos((cstep-182)/5);
dots.left=Xpos+b*Math.sin(((cstep-182)+i*4.5)/5);
}
}
if (cstep > 210){
b-=10;
}
if (b < -wdth){
for (i = 0; i < n; i++){
(document.layers)?document.layers["nsstars"+i].top=-200:iestars[i].style.top=-200;
}
cstep=0;
step=1;
a=0;
b=100;
}
}
//-->
</script>
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■４■■
[概要]
マウスの周りを惑星移動するような効果
[参照]
Kurt's
DHTMLより
[ソース]
<HTML>
<HEAD>
<TITLE>惑星</TITLE>
</HEAD>
<BODY>
<script language="JavaScript">
<!--
/*----------初期設定----------*/
//星の数（配列を増やせばいくらでも増やせる）
colours=new Array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')
//星の大きさ
var star_size = 4;
amount=colours.length;
ns=(document.layers)?1:0,step=0.2,currStep=0,my=0,mx=0;
if (ns){
for (i=0; i < amount; i++){
document.write('<LAYER NAME="nsstars'+i+'" BGCOLOR='+colours[i]+' CLIP="0,0,'+star_size+','+star_size+'"></LAYER>');
}
}
else{
document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');
for (i=0; i < amount; i++){
document.write('<span id="iestars" style="position:absolute;top:0;left:0;width:'+star_size+'px;height:'+star_size+'px;background:'+colours[i]+';font-size:2px"></span>');
}
document.write('</div></div>');
}
/*----------メインプログラム----------*/
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
window.onload=stars;
/*----------関数----------*/
//マウスの位置
function Mouse(evnt){
my = (document.layers)?evnt.pageY:event.y;
mx = (document.layers)?evnt.pageX:event.x;
}
//惑星移動関数
function stars(){
if (!ns)ie.style.top=document.body.scrollTop;
for (i=0; i < amount; i++){
var layer=(document.layers)?document.layers["nsstars"+i]:iestars[i].style;
layer.top= my+Math.cos((20*Math.sin(currStep/20))+i*70)*100*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
layer.left=mx+Math.sin((20*Math.sin(currStep/20))+i*70)*180*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
}
currStep+=step;
setTimeout('stars()',10);
}
//-->
</script>
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■５■■
[概要]
マウスの周りを惑星移動するような効果
[参照]
Kurt's
DHTMLより
[ソース]
<HTML>
<HEAD>
<TITLE>惑星</TITLE>
</HEAD>
<BODY>
<script language="JavaScript">
<!--
/*----------初期設定----------*/
//画像
colours = 'img3.gif';
//画像の数
amount=7;
ns=(document.layers)?1:0,step=0.2,currStep=0,my=0,mx=0;
if (ns){
for (i=0; i < amount; i++){
document.write('<LAYER NAME="nsstars'+i+'" TOP=-200 LEFT=-200><IMG SRC="'+colours+'"></LAYER>');
}
}
else{
document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');
for (i=0; i < amount; i++){
document.write('<span id="iestars" style="position:absolute;top:-200;left:-200;"><IMG SRC="'+colours+'"></span>');
}
document.write('</div></div>');
}
/*----------メインプログラム----------*/
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
window.onload=stars;
/*----------関数----------*/
//マウスの位置
function Mouse(evnt){
my = (document.layers)?evnt.pageY:event.y;
mx = (document.layers)?evnt.pageX:event.x;
}
//惑星移動関数
function stars(){
if (!ns)ie.style.top=document.body.scrollTop;
for (i=0; i < amount; i++){
var layer=(document.layers)?document.layers["nsstars"+i]:iestars[i].style;
layer.top= my+Math.cos((20*Math.sin(currStep/20))+i*70)*100*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
layer.left=mx+Math.sin((20*Math.sin(currStep/20))+i*70)*180*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
}
currStep+=step;
setTimeout('stars()',10);
}
//-->
</script>
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■６■■
[概要]
マウスの周りを複数の画像が惑星運動する
[参照]
Kurt's
DHTMLより
[ソース]
<HTML>
<HEAD>
<TITLE>惑星</TITLE>
</HEAD>
<BODY>
<script language="JavaScript">
<!--
/*----------初期設定----------*/
//星の数（配列を増やせばいくらでも増やせる）
colours=new Array('画像のURL1','画像のURL2','画像のURL3','画像のURL4','画像のURL5','画像のURL6','画像のURL7')
amount=colours.length;
ns=(document.layers)?1:0,step=0.2,currStep=0,my=0,mx=0;
if (ns){
for (i=0; i < amount; i++){
document.write('<LAYER NAME="nsstars'+i+'" TOP=-200 LEFT=-200><IMG
SRC="'+colours[i]+'"></LAYER>');
}
}
else{
document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div
style="position:relative">');
for (i=0; i < amount; i++){
document.write('<span id="iestars"
style="position:absolute;top:-200;left:-200;"><IMG SRC="'+colours[i]+'"></span>');
}
document.write('</div></div>');
}
/*----------メインプログラム----------*/
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
window.onload=stars;
/*----------関数----------*/
//マウスの位置
function Mouse(evnt){
my = (document.layers)?evnt.pageY:event.y;
mx = (document.layers)?evnt.pageX:event.x;
}
//惑星移動関数
function stars(){
if (!ns)ie.style.top=document.body.scrollTop;
for (i=0; i < amount; i++){
var layer=(document.layers)?document.layers["nsstars"+i]:iestars[i].style;
layer.top= my+Math.cos((20*Math.sin(currStep/20))+i*70)*100*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
layer.left=mx+Math.sin((20*Math.sin(currStep/20))+i*70)*180*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
}
currStep+=step;
setTimeout('stars()',10);
}
//-->
</script>
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■７■■
[概要]
マウスの周りを回転する
[参照]
Kurt's
DHTMLより
[ソース]
<HTML>
<HEAD>
<TITLE>スピン</TITLE>
<script language="JavaScript">
<!--
/*----------初期設定----------*/
//星の色の種類
Clrs=new Array('000000','ff0000','00ff00','0000aa','aaaa00','aaaa00','aa00aa','00aaaa','555555');
//星の大きさ
Clrs_size = 3;
ns=(document.layers)?1:0;
var amount = 8;
//星の数
var step=0.3;
var currStep=0;
var Ypos=0;
var Xpos=0;
if (ns){
for (i=0; i < amount; i++){
document.write('<LAYER NAME="n'+i+'" LEFT=0 TOP=0 BGCOLOR=#FFFFFF CLIP="0,0,'+Clrs_size+','+Clrs_size+'"></LAYER>');
}
window.captureEvents(Event.MOUSEMOVE);
function nMouse(evnt){
Ypos = evnt.pageY;
Xpos = evnt.pageX;
}
window.onMouseMove=nMouse;
}
else{
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="me" style="position:absolute;top:0px;left:0px;width:2px;height:'+Clrs_size+'px;font-size:'+Clrs_size+'px;background:#00aaff"></div>');
}
document.write('</div></div>');
function iMouse(){
Ypos=event.y+document.body.scrollTop;
Xpos=event.x+document.body.scrollLeft;
}
document.onmousemove = iMouse;
}
/*----------メインプログラム----------*/
window.onload=flash;
/*----------関数----------*/
function flash(){
for (i=0; i < amount; i++){
var randCol=Math.floor(Math.random()*Clrs.length);
var layer=(document.layers)?document.layers['n'+i]:me[i].style;
layer.top =Ypos+60*Math.sin((currStep + i*3.1)/4)*Math.cos(currStep/10);
layer.left=Xpos+60*Math.cos((currStep + i*3.1)/4);
if (ns){
layer.bgColor=Clrs[randCol];
}
else{
layer.background=Clrs[randCol];
}
}
currStep+=step;
setTimeout("flash()",10);
}
// -->
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■８■■
[概要]
マウスの周りを回転する
[参照]
Kurt's
DHTMLより
[ソース]
<HTML>
<HEAD>
<TITLE>スピン</TITLE>
<script language="JavaScript">
<!--
/*----------初期設定----------*/
//星の色の種類
Clrs = '画像のURL';
//星の大きさ
Clrs_size = 3;
ns=(document.layers)?1:0;
var amount = 8;
//星の数
var step=0.3;
var currStep=0;
var Ypos=0;
var Xpos=0;
if (ns){
for (i=0; i < amount; i++){
document.write('<LAYER NAME="n'+i+'" TOP=-200 LEFT=-200><IMG SRC="'+Clrs+'"></LAYER>');
}
window.captureEvents(Event.MOUSEMOVE);
function nMouse(evnt){
Ypos = evnt.pageY;
Xpos = evnt.pageX;
}
window.onMouseMove=nMouse;
}
else{
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i=0; i < amount; i++){
document.write('<span id="me" style="position:absolute;top:-200;left:-200;"><IMG SRC="'+Clrs+'"></span>');
}
document.write('</div></div>');
function iMouse(){
Ypos=event.y+document.body.scrollTop;
Xpos=event.x+document.body.scrollLeft;
}
document.onmousemove = iMouse;
}
/*----------メインプログラム----------*/
window.onload=flash;
/*----------関数----------*/
function flash(){
for (i=0; i < amount; i++){
var layer=(document.layers)?document.layers['n'+i]:me[i].style;
layer.top =Ypos+60*Math.sin((currStep + i*3.1)/4)*Math.cos(currStep/10);
layer.left=Xpos+60*Math.cos((currStep + i*3.1)/4);
}
currStep+=step;
setTimeout("flash()",10);
}
// -->
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
■■９■■
[概要]
マウスの周りを回転する
[参照]
Kurt's
DHTMLより
[ソース]
<HTML>
<HEAD>
<TITLE>スピン</TITLE>
<script language="JavaScript">
<!--
/*----------初期設定----------*/
//星の色の種類
Clrs = new Array('画像のURL1','画像のURL2','画像のURL3','画像のURL4','画像のURL5','画像のURL6','画像のURL7','画像のURL8')
//星の大きさ
Clrs_size = 3;
ns=(document.layers)?1:0;
var amount = 8;
//星の数
var step=0.3;
var currStep=0;
var Ypos=0;
var Xpos=0;
if (ns){
for (i=0; i < amount; i++){
document.write('<LAYER NAME="n'+i+'" TOP=-200 LEFT=-200><IMG SRC="'+Clrs[i]+'"></LAYER>');
}
window.captureEvents(Event.MOUSEMOVE);
function nMouse(evnt){
Ypos = evnt.pageY;
Xpos = evnt.pageX;
}
window.onMouseMove=nMouse;
}
else{
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i=0; i < amount; i++){
document.write('<span id="me" style="position:absolute;top:-200;left:-200;"><IMG SRC="'+Clrs[i]+'"></span>');
}
document.write('</div></div>');
function iMouse(){
Ypos=event.y+document.body.scrollTop;
Xpos=event.x+document.body.scrollLeft;
}
document.onmousemove = iMouse;
}
/*----------メインプログラム----------*/
window.onload=flash;
/*----------関数----------*/
function flash(){
for (i=0; i < amount; i++){
var layer=(document.layers)?document.layers['n'+i]:me[i].style;
layer.top =Ypos+60*Math.sin((currStep + i*3.1)/4)*Math.cos(currStep/10);
layer.left=Xpos+60*Math.cos((currStep + i*3.1)/4);
}
currStep+=step;
setTimeout("flash()",10);
}
// -->
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。