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

『のんびりマウスストーカーを作ってみる1』と同じ機能ですが、マウスとの距離で表情(文字)を変えてみました。

実行例

▼マウスを動かすと、表情を変えながらついていきます。
(^0^)/

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

function moveObj() {
	trgObj.posX = getObjPos( trgObj.object, 1 );
	trgObj.posY = getObjPos( trgObj.object, 2 );
	if ( Math.abs( trgObj.posX - ( mousePosX + trgObj.left ) ) <= trgObj.speed ) {
		trgObj.posX = mousePosX + trgObj.left;
	} else if ( trgObj.posX < ( mousePosX + trgObj.left ) ) {
		trgObj.posX += trgObj.speed;
	} else {
		trgObj.posX -= trgObj.speed;
	}
	if ( Math.abs( trgObj.posY - mousePosY ) <= trgObj.speed ) {
		trgObj.posY = mousePosY;
	} else if ( trgObj.posY < mousePosY ) {
		trgObj.posY += trgObj.speed;
	} else {
		trgObj.posY -= trgObj.speed;
	}
	if ( Math.abs( trgObj.posY - mousePosY ) > 200 || Math.abs( trgObj.posX - mousePosX ) > 200 ) {
		setWord( "(T-T)" );
	} else if ( Math.abs( trgObj.posY - mousePosY ) > 100 || Math.abs( trgObj.posX - mousePosX ) > 100 ) {
		setWord( "(-.-)" );
	} else {
		setWord( "(^0^)" );
	}
	if ( bwType == 1 ) {
		trgObj.object.style.posLeft = trgObj.posX;
		trgObj.object.style.posTop = trgObj.posY;
	} else if ( bwType == 2 ) {
		trgObj.object.style.left = trgObj.posX;
		trgObj.object.style.top = trgObj.posY;
	} else {
		trgObj.object.moveTo( trgObj.posX, trgObj.posY );
	}
	clearTimeout( trgObj.timeID );
	if ( moveFlag ) { trgObj.timeID = setTimeout( "moveObj();", trgObj.interval ); }
}

function setWord( word ) {
	if ( bwType == 3 ) {
		trgObj.object.document.open( "text/html" );
		trgObj.object.document.write( word );
		trgObj.object.document.close();
	} else {
		trgObj.object.innerText = word;
	}
}

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

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

function setObject( id ) {
	switch ( bwType ) {
		case 1:
			return document.all( id );
			break;
		case 2:
			return document.getElementById( id );
			break;
		case 3:
			return document.layers[ id ];
			break;
		default:
			return;
	}
}

function getObjPos( obj, index ) {
	if ( bwType == 1 ) {
		if ( index == 1 ){
			return obj.style.posLeft;
		} else {
			return obj.style.posTop;
		}
	} else if ( bwType == 2 ) {
		if ( index == 1 ){
			return obj.style.left;
		} else {
			return obj.style.top;
		}
	} else {
		if ( index == 1 ){
			return obj.left;
		} else {
			return obj.top;
		}
	}
}

function formLoad( id ){
	bwType = bwCheck();
	if ( bwType == null ) {
		return;
	} else if ( bwType == 3 ) {
		document.captureEvents( Event.MOUSEMOVE );
	}
	document.onmousemove = mouseMove;
	trgObj = new myObject( setObject( id ), 15, 10, 100 );
}

function myObject( obj, lf, sp, inter) {
	this.object = obj;
	this.left = lf;
	this.speed = sp;
	this.interval = inter;
	this.timeID;
	this.posX;
	this.posY;
}
<BODY onLoad="formLoad( 'face' );">
<SPAN id="face" style="position:absolute;">(^0^)/</SPAN>

解説&ステップアップ

『画面上の文字を動的に変更してみる』を利用しているだけです。

動作確認

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

© hyork@yahoo.co.jp (2001. 4. 3)