followingLAYER()
マウスカーソルを指定した画像が追跡します。
getMouseX()と
getMouseY()を利用してマウス位置を取得し、
moveLAYER()で追跡させています。
使いやすくするためにfollowingLAYERはオブジェクトにまとめてありますので使うときはnew演算子を使用して追跡レイヤー作成するだけです。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
Cross-Browser のための Sample Function
Syntax :
追跡レイヤー名 = new followingLAYER('レイヤ−名'
,右方向位置,下方向位置,動作間隔,HTML)
//レイヤーの数だけa[i]=...部分を増減して使ってください
var a = new Array()
a[0] = new followingLAYER('flwLay0',10,30,100,'<img src=./me0.gif>')
a[1] = new followingLAYER('flwLay1',10,30,300,'<img src=./me0.gif>')
a[2] = new followingLAYER('flwLay2',10,30,500,'<img src=./me0.gif>')
/*==================================================================
followingLAYER()
Syntax :
追跡レイヤー名 = new followingLAYER('レイヤ−名'
,右方向位置,下方向位置,動作間隔,html)
レイヤ−名 マウスを追跡させるレイヤー名
右方向位置 マウスから右方向へ何ピクセル離すか
下方向位置 マウスから下方向へ何ピクセル離すか
動作間隔 マウスを追跡する間隔(1/1000秒単位 何秒後に動くか?)
html マウスを追跡するHTML
------------------------------------------------------------------*/
/*--/////////////ここから下はさわらなくても動きます/////////////--*/
//--追跡オブジェクト
//e4,e5,e6,n4,n6,n7,m1,o6,o7,s1用
function followingLAYER(layName,ofx,ofy,delay,html){
this.layName = layName //マウスを追跡させるレイヤー名
this.ofx = ofx //マウスから右方向へ何ピクセル離すか
this.ofy = ofy //マウスから下方向へ何ピクセル離すか
this.delay = delay //マウスを追跡するタイミング
if(document.layers)
this.div='<layer name="'+layName+'" left="-100" top="-100">\n'
+ html +'</layer>\n'
else
this.div='<div id="'+layName+'"\n'
+'style="position:absolute;left:-100px;top:-100px">\n'
+ html +'</div>\n'
document.write(this.div)
}
//--メソッドmoveLAYER()を追加する
followingLAYER.prototype.moveLAYER = moveLAYER //メソッドを追加する
function moveLAYER(layName,x,y){
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.left = x
document.getElementById(layName).style.top = y
} else if(document.all){ //e4用
document.all(layName).style.pixelLeft = x
document.all(layName).style.pixelTop = y
} else if(document.layers) //n4用
document.layers[layName].moveTo(x,y)
}
//--Event をセットする( マウスを動かすとdofollow()を実行します )
document.onmousemove = dofollow
//--n4マウスムーブイベント走査開始
if(document.layers)document.captureEvents(Event.MOUSEMOVE)
//--Operaの全画面Event拾えない対策
if(window.opera){
op_dmydoc ='<div id="dmy" style="position:absolute;z-index:0'
+' left:100%;top:100%"></div> '
document.write(op_dmydoc)
}
//--イベント発生時にマウス追跡実行
function dofollow(e){
for(var i=0 ; i < a.length ; i++ )
setTimeout("a["+i+"].moveLAYER(a["+i+"].layName,"
+(getMouseX(e)+a[i].ofx)+","+(getMouseY(e)+a[i].ofy)+")"
,a[i].delay)
}
//--マウスX座標get
function getMouseX(e){
if(navigator.userAgent.search(
"Opera(\ |\/)6") != -1 ) //o6用
return e.clientX
else if(document.all) //e4,e5,e6用
return document.body.scrollLeft+event.clientX
else if(document.layers ||
document.getElementById) //n4,n6,n7,m1,o7,s1用
return e.pageX
}
//--マウスY座標get
function getMouseY(e){
if(navigator.userAgent.search(
"Opera(\ |\/)6") != -1 ) //o6用
return e.clientY
else if(document.all) //e4,e5,e6用
return document.body.scrollTop+event.clientY
else if(document.layers ||
document.getElementById) //n4,n6,n7,m1,o7,s1用
return e.pageY
}
/*//////////////////////////////// マウスを追跡するレイヤーここまで */
Example
<script type='text/javascript'>
<!--
//レイヤーの数だけa[i]=...部分を増減して使ってください
var a = new Array()
a[0] = new followingLAYER('flwLay0',10,30,100,'<img src=./me0.gif>')
a[1] = new followingLAYER('flwLay1',10,30,300,'<img src=./me0.gif>')
a[2] = new followingLAYER('flwLay2',10,30,500,'<img src=./me0.gif>')
/*==================================================================
followingLAYER()
Syntax :
追跡レイヤー名 = new followingLAYER('レイヤ−名'
,右方向位置,下方向位置,動作間隔,html)
レイヤ−名 マウスを追跡させるレイヤー名
右方向位置 マウスから右方向へ何ピクセル離すか
下方向位置 マウスから下方向へ何ピクセル離すか
動作間隔 マウスを追跡する間隔(1/1000秒単位 何秒後に動くか?)
html マウスを追跡するHTML
下記のa[i]部分を必要なレイヤーの数だけ増やして使ってください。
a[i] = new followingLAYER('layName',ofx,ofy,delay,imgsrc)
------------------------------------------------------------------*/
/*--/////////////ここから下はさわらなくても動きます/////////////--*/
//--追跡オブジェクト
//e4,e5,e6,n4,n6,n7,m1,o6,o7,s1用
function followingLAYER(layName,ofx,ofy,delay,html){
this.layName = layName //マウスを追跡させるレイヤー名
this.ofx = ofx //マウスから右方向へ何ピクセル離すか
this.ofy = ofy //マウスから下方向へ何ピクセル離すか
this.delay = delay //マウスを追跡するタイミング
if(document.layers)
this.div='<layer name="'+layName+'" left="-100" top="-100">\n'
+ html +'</layer>\n'
else
this.div='<div id="'+layName+'"\n'
+'style="position:absolute;left:-100px;top:-100px">\n'
+ html +'</div>\n'
document.write(this.div)
}
//--メソッドmoveLAYER()を追加する
followingLAYER.prototype.moveLAYER = moveLAYER //メソッドを追加する
function moveLAYER(layName,x,y){
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.left = x
document.getElementById(layName).style.top = y
} else if(document.all){ //e4用
document.all(layName).style.pixelLeft = x
document.all(layName).style.pixelTop = y
} else if(document.layers) //n4用
document.layers[layName].moveTo(x,y)
}
//--Event をセットする( マウスを動かすとdofollow()を実行します )
document.onmousemove = dofollow
//--n4マウスムーブイベント走査開始
if(document.layers)document.captureEvents(Event.MOUSEMOVE)
//--Operaの全画面Event拾えない対策
if(window.opera){
op_dmydoc ='<div id="dmy" style="position:absolute;z-index:0'
+' left:100%;top:100%"></div> '
document.write(op_dmydoc)
}
//--イベント発生時にマウス追跡実行
function dofollow(e){
for(var i=0 ; i < a.length ; i++ )
setTimeout("a["+i+"].moveLAYER(a["+i+"].layName,"
+(getMouseX(e)+a[i].ofx)+","+(getMouseY(e)+a[i].ofy)+")"
,a[i].delay)
}
//--マウスX座標get
function getMouseX(e){
if(navigator.userAgent.search(
"Opera(\ |\/)6") != -1 ) //o6用
return e.clientX
else if(document.all) //e4,e5,e6用
return document.body.scrollLeft+event.clientX
else if(document.layers ||
document.getElementById) //n4,n6,n7,m1,o7,s1用
return e.pageX
}
//--マウスY座標get
function getMouseY(e){
if(navigator.userAgent.search(
"Opera(\ |\/)6") != -1 ) //o6用
return e.clientY
else if(document.all) //e4,e5,e6用
return document.body.scrollTop+event.clientY
else if(document.layers ||
document.getElementById) //n4,n6,n7,m1,o7,s1用
return e.pageY
}
/*//////////////////////////////// マウスを追跡するレイヤーここまで */
//-->
</script>