|
HTMLタグ > 画像がマウスカーソルを追いかけてくる・ひとつ
|
マウスカーソルを画像が追いかけてきます。
画面のどこかをクリックするとその場で止まり、またクリックすると追いかけてきます。
1) </title>〜</head>に以下のタグを入れます。
設定を変えられるようにいろいろ書いてありますが、ここは何も変えなくてもいいと思います。
変えたい方はかわる範囲でどうぞｗ
<script language=javascript>
<!--
var dxOa3=50,dyOa3=20; // 開始位置 (dxOa3：x座標、dyOa3：y座標)
var hOa3=10; // 増やすと移動間隔が大きくなります。
var mouseSpeedOa3=400; // 移動スピード (1/1000秒)
var h2Oa3=30; // 増やすと停止範囲が大きくなります。
// (hOa3より小さくしないで下さい。)
var spDxOa3=10,spDyOa3=-5; // 止まった時のマウスからの位置
// (spDxOa3：x座標、spDyOa3：y座標)
var moveStopOa3=true; // 画像の停止の有無です。
// (true：有り、false：無し)
var mxOa3=dxOa3,myOa3=dyOa3,moveFlagOa3=true,tiOa3,moveStopFlagOa3=false;
// イベントキャプチャーを設定する部分です。
if (document.all || document.layers) {
if (document.layers) document.captureEvents(Event.MOUSEMOVE || Event.CLICK);
document.onmousemove=mouseMoveEvOa3;
document.onclick=mouseMoveStopOa3;
}
// イベントキャプチャーのマウス位置関数の部分です。
function mouseMoveEvOa3(e) {
mxOa3=getPoOa3(e,true);
myOa3=getPoOa3(e,false);
}
// イベントキャプチャーのStop関数の部分です。
function mouseMoveStopOa3() {
if (moveStopOa3) {
moveStopFlagOa3=!moveStopFlagOa3;
}
}
// マウスカーソルの座標を取得する部分です。
function getPoOa3(e,flag) {
if (flag) {
if (document.all) return document.body.scrollLeft+event.clientX;
if (document.layers) return e.pageX;
} else {
if (document.all) return document.body.scrollTop+event.clientY;
if (document.layers) return e.pageY;
}
}
// 指定した場所に画像を移動させる部分です。
function setPoOa3(name,x,y) {
if (document.all) {
document.all(name).style.posLeft=x+spDxOa3;
document.all(name).style.posTop=y+spDyOa3;
}
if (document.layers) document.layers[name].moveTo(x+spDxOa3,y+spDyOa3);
}
// 移動距離からxy座標を算出する関数です。
function getXYOa3(x1,y1,x2,y2,l,dl,flag) {
var x,y;
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 mouseMoveOa3() {
if (document.all || document.layers) {
if (!moveStopFlagOa3) {
var xx,l;
l=Math.abs(Math.sqrt(Math.pow((mxOa3-dxOa3),2)+Math.pow((myOa3-dyOa3),2)));
if (l
dxOa3=mxOa3;
dyOa3=myOa3;
setPoOa3("imOa3",dxOa3,dyOa3);
moveFlagOa3=false;
} else {
if (l>h2Oa3 || l<=h2Oa3 && moveFlagOa3) {
xx=getXYOa3(dxOa3,dyOa3,mxOa3,myOa3,l,hOa3,true);
dyOa3=getXYOa3(dxOa3,dyOa3,mxOa3,myOa3,l,hOa3,false);
dxOa3=xx;
setPoOa3("imOa3",dxOa3,dyOa3);
moveFlagOa3=true;
}
}
}
clearTimeout(tiOa3);
tiOa3=setTimeout("mouseMoveOa3()",mouseSpeedOa3);
}
}
// End
//-->
</script>
|
2) <body>〜</body>のどこかに以下のタグを入れます。
【幅】、【高さ】には、画像の幅と高さを2か所づつ入れます。
<span id="imOa3" style="position:absolute; top:100px; left:100px; width:【幅】px; height:【高さ】px; clip:rect(0,【幅】,【高さ】,0)">
<img src=【画像】></span>
<script language=javascript>
<!--
mouseMoveOa3();
// End
//-->
</script>
<script language=javascript>
<!--
function show(id, flag) {
if (document.all) {
document.all.item(id).style.visibility = "visible";
}
if (document.layers) {
document.layers[id].visibility = "show";
}
}
function hide(id, flag) {
if (document.all) {
document.all.item(id).style.visibility = "hidden";
}
if (document.layers) {
document.layers[id].visibility = "hide";
}
}
//-->
</script>
|
「HTMLタグ」のトップに戻る
|
|
|
