|
HTMLタグ > 画像がマウスカーソルを追いかけてくる・数種類
|
マウスカーソルをいくつかの画像が追いかけてきます。
1) </title>〜</head>の中に以下のタグを入れます。
コメントに従って直していけばいいけど、よくわからないときは【画像の数-1】だけの
指定でいいと思います。
画像の数を増やす場合は
xOa32[【番号】]=100,yOa32[【番号】]=100;
の行を増やし、番号も順番につけていきます。
<script language=javascript>
<!--
///////////////////////////////////////////////////
// お遊び No.3.2 Produced by「CLUB とむやん君」
// URL http://www2s.biglobe.ne.jp/~club_tom/
// 上の2行は著作権表示ですので消さないで下さい
///////////////////////////////////////////////////
///////////////////////////////////////////////////
// 画像の数＆開始位置＆移動間隔＆移動スピード＆移動するまでの停止範囲＆
// 画像どうしの間隔＆止まった時のマウスからの位置＆
// クリックすると画像の動きを止めるかどうかを書いて下さい。
var kazOa32=【画像の数-1】; // 個数(0から始まります。)
var xOa32=new Array(),yOa32=new Array();
xOa32[0]=100,yOa32[0]=100; // 開始位置(xOa32[?]：x座標、yOa32[?]：y座標)
xOa32[1]=100,yOa32[1]=100; // これを変更すると重ならないように出来ます。
xOa32[2]=100,yOa32[2]=100;
xOa32[3]=100,yOa32[3]=100;
xOa32[4]=100,yOa32[4]=100;
var hOa32=20; // 移動間隔
var mouseSpeedOa32=40; // 移動スピード(単位：1/1000秒)
var h2Oa32_1=40; // 停止範囲(hOa32より小さくしないで下さい。)
var h2Oa32_2=50; // 画像どうしの間隔(hOa32より小さくしないで下さい。)
var spDxOa32=10,spDyOa32=-5; // 止まった時のマウスからの位置
// (spDxOa3：x座標、spDyOa3：y座標)
var moveStopOa32=true; // クリックでの画像の停止の有無です。
// (true：有り、false：無し)
///////////////////////////////////////////////////
var i;
var dxOa32=new Array(),dyOa32=new Array();
var moveFlagOa32=new Array();
for (i=0;i<=kazOa32;i++) {
dxOa32[i]=xOa32[i],dyOa32[i]=yOa32[i];
moveFlagOa32[i]=true;
}
var mxOa32=xOa32[0],myOa32=yOa32[0],moveStopFlagOa32=false;
// イベントキャプチャーを設定する部分です。
if (document.all || document.getElementById || document.layers) {
if (document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=mouseMoveEvOa32;
if (moveStopOa32) {
if (document.layers) document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=mouseMoveStopOa32;
}
}
// イベントキャプチャーのマウス位置関数の部分です。
function mouseMoveEvOa32(e) {
if (document.all) {
mxOa32=document.body.scrollLeft+event.clientX;
myOa32=document.body.scrollTop+event.clientY;
}
else if (document.getElementById || document.layers) {
mxOa32=e.pageX;
myOa32=e.pageY;
}
}
// イベントキャプチャーのStop関数の部分です。
function mouseMoveStopOa32() {&
moveStopFlagOa32=!moveStopFlagOa32;
}
// 指定した場所に画像を移動させる部分です。
function setPoOa32(name,x,y) {
if (document.all) {
document.all(name).style.posLeft=x+spDxOa32;
document.all(name).style.posTop=y+spDyOa32;
}
else if (document.getElementById) {
document.getElementById(name).style.left=x+spDxOa32;
document.getElementById(name).style.top=y+spDyOa32;
}
else if (document.layers) document.layers[name].moveTo(x+spDxOa32,y+spDyOa32);
}
// 移動距離からxy座標を算出する部分です。
function getXYOa32(x1,y1,x2,y2,l,dl,flag) {
var x,y;
if (l==0) {
if (flag==true) return x1;
if (flag==false) return y1;
}
else {
x=dl/l*(x2-x1)+x1;
if (flag==true) return x;
if (flag==false) {
if (x1-x2==0) {
if (y1
else return y1-dl;
} else return (y1-y2)/(x1-x2)*x+y1-(y1-y2)/(x1-x2)*x1;
}
}
}
// メイン関数の部分です。
function mouseMoveOa32() {
if (document.all || document.getElementById || document.layers) {
var i,l,x2,y2;
for (i=0;i<=kazOa32;i++) {
if (i==0) {
if (!moveStopFlagOa32) x2=mxOa32,y2=myOa32;
else x2=dxOa32[i],y2=dyOa32[i];
} else x2=dxOa32[i-1]+(xOa32[i]-xOa32[i-1]),y2=dyOa32[i-1]+(yOa32[i]-yOa32[i-1]);
l=Math.abs(Math.sqrt(Math.pow((x2-dxOa32[i]),2)+Math.pow((y2-dyOa32[i]),2)));
if (i==0) {
if (l
dxOa32[i]=x2;
dyOa32[i]=y2;
setPoOa32("img"+i+"Oa32",dxOa32[i],dyOa32[i]);
moveFlagOa32[i]=false;
}
else if (l>h2Oa32_1 || l<=h2Oa32_1 && moveFlagOa32[i]) {
dxOa32[i]=getXYOa32(dxOa32[i],dyOa32[i],x2,y2,l,hOa32,true);
dyOa32[i]=getXYOa32(dxOa32[i],dyOa32[i],x2,y2,l,hOa32,false);
setPoOa32("img"+i+"Oa32",dxOa32[i],dyOa32[i]);
moveFlagOa32[i]=true;
}
}
else if (l
dxOa32[i]=x2;
dyOa32[i]=y2;
setPoOa32("img"+i+"Oa32",dxOa32[i],dyOa32[i]);
moveFlagOa32[i]=false;
}
else if (l>h2Oa32_2 || l<=h2Oa32_2 && !moveFlagOa32[i-1]) {
dxOa32[i]=getXYOa32(dxOa32[i],dyOa32[i],x2,y2,l,hOa32,true);
dyOa32[i]=getXYOa32(dxOa32[i],dyOa32[i],x2,y2,l,hOa32,false);
setPoOa32("img"+i+"Oa32",dxOa32[i],dyOa32[i]);
moveFlagOa32[i]=true;
}
}
setTimeout("mouseMoveOa32()",mouseSpeedOa32);
}
}
// End -->
</script>
<script language=javascript>
jokatan=10;moe=1;
</script>
|
2) <body>〜</body>のどこかに、以下のタグを入れます。
画像の数に合わせて、
<span id=img【番号】Oa32 style="position:absolute; left:100px; top:100px; width:【幅】px; height:【高さ】px; clip:rect(0px 【幅】px 【高さ】px 0px); z-index:1">
<img src=【画像】></span>
を増減して、番号も合わせて下さい。
★画像は、後に書くものが下に重なります。
下のタグなら、【画像5】がいちばん下、【画像1】がいちばん上になって重なります。
1) で開始位置を変えた場合は、すべての
left:100px; top100px;
の数字を1)と同じにします。
<span id=mg0Oa32 style="position:absolute; left:100px; top:100px; width:【幅】px; height:【高さ】px; clip:rect(0px 【幅】px 【高さ】px 0px); z-index:1">
<img src=【画像5】></span>
<span id=img1Oa32 style="position:absolute; left:100px; top:100px; width:【幅】px; height:【高さ】px; clip:rect(0px 【幅】px 【高さ】px 0px); z-index:1">
<img src=【画像2】></span>
<span id=img2Oa32 style="position:absolute; left:100px; top:100px; width:【幅】px; height:【高さ】px; clip:rect(0px 【幅】px 【高さ】px 0px); z-index:1">
<img src=【画像3】></span>
<span id=img3Oa32 style="position:absolute; left:100px; top:100px; width:【幅】px; height:【高さ】px; clip:rect(0px 【幅】px 【高さ】px 0px); z-index:1">
<img src=【画像4】></span>
<span id=img4Oa32 style="position:absolute; left:100px; top:100px; width:【幅】px; height:【高さ】px; clip:rect(0px 【幅】px 【高さ】px 0px); z-index:1">
<img src=【画像5】></span>
<script language=javascript>
<!--
mouseMoveOa32();
// End
-->
</script>
|
「HTMLタグ」のトップに戻る
|
|
|
