コード
var bwType = null;
var moveFlag = false;
var mousePosX;
var mousePosY;
function moveObj( cnt ) {
var ltr = letter[ cnt ];
ltr.posX = getObjPos( ltr.object, 1 );
ltr.posY = getObjPos( ltr.object, 2 );
if ( Math.abs( ltr.posX - ( mousePosX + ltr.left ) ) <= ltr.speed ) {
ltr.posX = mousePosX + ltr.left;
} else if ( ltr.posX < ( mousePosX + ltr.left ) ) {
ltr.posX += ltr.speed;
} else {
ltr.posX -= ltr.speed;
}
if ( Math.abs( ltr.posY - mousePosY ) <= ltr.speed ) {
ltr.posY = mousePosY;
} else if ( ltr.posY < mousePosY ) {
ltr.posY += ltr.speed;
} else {
ltr.posY -= ltr.speed;
}
if ( bwType == 1 ) {
ltr.object.style.posLeft = ltr.posX;
ltr.object.style.posTop = ltr.posY;
} else if ( bwType == 2 ) {
ltr.object.style.left = ltr.posX;
ltr.object.style.top = ltr.posY;
} else {
ltr.object.moveTo( ltr.posX, ltr.posY );
}
clearTimeout( ltr.timeID );
ltr.timeID = setTimeout( "moveObj( " + cnt + " );", ltr.interval );
}
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;
startMove();
}
}
function startMove() {
for ( cnt = 0; cnt < 5; cnt++ ) {
moveObj( cnt );
}
}
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(){
bwType = bwCheck();
if ( bwType == null ) {
return;
} else if ( bwType == 3 ) {
document.captureEvents( Event.MOUSEMOVE );
}
document.onmousemove = mouseMove;
letter[ 0 ] = new myObject( setObject( "H" ), 15, 15, 100 );
letter[ 1 ] = new myObject( setObject( "Y" ), 30, 14, 110 );
letter[ 2 ] = new myObject( setObject( "O" ), 45, 13, 120 );
letter[ 3 ] = new myObject( setObject( "R" ), 60, 12, 130 );
letter[ 4 ] = new myObject( setObject( "K" ), 75, 11, 140 );
}
function myObject( obj, lf, sp, inter) {
this.object = obj;
this.left = lf;
this.speed = sp;
this.interval = inter;
this.timeID;
this.posX;
this.posY;
}
letter = new Array( 5 );
<BODY onLoad="formLoad()">
<SPAN id="H" style="position:absolute;left:100;">H</SPAN>
<SPAN id="Y" style="position:absolute;left:115;">Y</SPAN>
<SPAN id="O" style="position:absolute;left:130;">O</SPAN>
<SPAN id="R" style="position:absolute;left:145;">R</SPAN>
<SPAN id="K" style="position:absolute;left:160;">K</SPAN>