JavaScript サンプル：『マウスストーカーを作ってみる２』

説明

今回のマウスストーカーは、クリックで「ついてくる／こない」を切り替えられます。

実行例

▼クリックするとマウスについて行きます。
HYORK

コード

var bwType = null;
var trgObj = null;
var downFlag = false;
var mousePosX;
var mousePosY;

function moveObj() {
	var posX = mousePosX + 15;
	var posY = mousePosY + 15;
	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 mouseDown(e) {
	if ( downFlag ) {
		downFlag = false;
	} else {
		downFlag = true;
		mouseMove(e);
	}
}

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

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.MOUSEDOWN | Event.MOUSEMOVE );
			break;
		default:
			return;
	}
	document.onmousedown = mouseDown;
	document.onmousemove = mouseMove;
}

<BODY onLoad="formLoad( 'mouse' )">
<SPAN id="mouse" style="position:absolute;color:#ff0000;font-weight:bold;">○○○</SPAN>

解説＆ステップアップ

マウスのダウンイベントでフラグを切り替えているだけです。

動作確認

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