JavaScript サンプル：『ついてくる下線を作ってみる２』

説明

『ついてくる下線を作ってみる』と、『マウスストーカーを作ってみる２』を、組み合わせてみました。

実行例

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

コード

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

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

function mouseDown(e) {
	if ( downFlag ) {
		downFlag = false;
	} else {
		downFlag = true;
		mouseMove(e);
	}
}

function mouseMove(e) {
	if ( downFlag ) {
		if ( bwType == 1 ) {
			mousePosY = document.body.scrollTop + event.clientY;
			moveObj();
		} else {
			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( 'underline' )">
<SPAN id="underline" style="position:absolute;">
<HR size=1 width="100%" color="#ff0000">
</SPAN>

解説＆ステップアップ

ちなみにNN(確認ver.4.7)は、<HR>のcolor属性に対応してませんが、IE(確認ver.5.5)の場合は赤い下線が表示されます。

動作確認

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