Web覚書トップ > JavaScript サンプル > 『マウスストーカーを作ってみる1』
説明

マウスの後をついてくる、通称マウスストーカーと呼ばれる顔を作ってみます。

実行例

▼マウスを動かすと、下の顔がついていきます。
(^0^)/


コード
var bwType = null;
var trgObj = null;
var mousePosX;
var mousePosY;

function moveObj() {
	var posX = mousePosX + 10;
	var posY = mousePosY + 10;
	if ( bwType == 1 ) {
		trgObj.style.posLeft = posX;
		trgObj.style.posTop = posY;
	} else if ( bwType == 2 ) {
		trgObj.style.left = posX;
		trgObj.style.top = posY;
	} else {
		trgObj.moveTo( posX, posY );
	}
}

function mouseMove(e) {
	if ( bwType == 1 ) {
		mousePosX = document.body.scrollLeft + event.clientX;
		mousePosY = document.body.scrollTop + event.clientY;
		moveObj();
		return ( false );
	} else {
		mousePosX = e.pageX;
		mousePosY = e.pageY;
		moveObj();
		return ( false );
	}	
}

function bwCheck(){
	if ( document.all ) {
		return ( 1 );
	} else if ( document.getElementById ) {
		return ( 2 );
	} else if ( document.layers ) {
		return ( 3 );
	} else {
		return ( null );
	}
}

function formLoad( id ){
	bwType = bwCheck();
	switch ( bwType ) {
		case 1:
			trgObj = document.all( id );
			break;
		case 2:
			trgObj = document.getElementById( id );
			break;
		case 3:
			trgObj = document.layers[ id ];
			document.captureEvents( Event.MOUSEMOVE );
			break;
		default:
			return;
	}
	document.onmousemove = mouseMove;
}
<BODY onLoad="formLoad( 'face' )">
<SPAN id="face" style="position:absolute;">
(^0^)/
</SPAN>

解説&ステップアップ

顔文字を動かしてますが、当然普通の文字でも問題ありません。

動作確認

IE4.0(win)、IE5.0(win)、IE5.5(win)、NN4.7(win)

© hyork@yahoo.co.jp (2001. 3.15)