クリックすると移動しますtest1
クリックすると移動しますtest2

slideLAYERs()

Syntax : slideLAYERs('レイヤ−名',スタ−ト位置X,スタ−ト位置Y,終了位置X,終了位置Y,スピ−ド,ステップ数)

slideLAYER()は1つのレイヤーを動かすことしかできませんが、これは複数のレイヤーを一度に動かせます。 ステップ数は数が大きいほど早く動きます。

*このファンクションをコピーして<SCRIPT>と</SCRIPT>の間にペーストしておくだけでこの機能をNN,IE共通で利用できるようになります。

Cross-Browser のための Sample Function

//--slideLAYERs
var wx=new Array(),wy=new Array(),ex=new Array(),ey=new Array()
var spd=new Array(),step=new Array(),stepX=new Array(),stepY=new Array()
var mvFlag=new Array(),slideID=new Array(),count=new Array()
function slideLAYERs(layName,startX,startY,endX,endY,speed,stpx){

//--移動初期化
if(!mvFlag[layName]){
if(document.layers)clearTimeout(slideID[layName])
count[layName]=0 //--移動回数カウント(ステップ数)
var ofX=(endX-startX) //--移動距離x
var ofY=(endY-startY) //--移動距離y
step[layName]=
Math.max(Math.abs(ofX),Math.abs(ofY))/stpx //--移動ステップ数
stepX[layName]=ofX/step[layName] //--移動量x/ステップ
stepY[layName]=ofY/step[layName] //--移動量y/ステップ
wx[layName]=startX //--移動中のx座標
wy[layName]=startY //--移動中のy座標
ex[layName]=endX //--到着場所のx座標
ey[layName]=endY //--到着場所のy座標
spd[layName]=speed //--移動スピ−ド
mvFlag[layName]=true //--移動中ならtrue
}
if(mvFlag[layName]&&(count[layName]<=step[layName]-1)){
count[layName]++
wx[layName]+=stepX[layName]
wy[layName]+=stepY[layName]
if(document.layers)clearTimeout(slideID[layName])
slideID[layName]=
setTimeout('slideLAYERs("'+layName+'")',spd[layName])
}else{
//--停止
wx[layName]=ex[layName]
wy[layName]=ey[layName]
clearTimeout(slideID[layName]);mvFlag[layName]=false
}
//--移動
if(document.getElementById){
document.getElementById(layName).style.left=wx[layName]
document.getElementById(layName).style.top=wy[layName]
}
else if(document.layers)document.layers[layName].moveTo(wx[layName],wy[layName])
else if(document.all){
document.all(layName).style.pixelLeft=wx[layName]
document.all(layName).style.pixelTop=wy[layName]
}
}

Example
<SCRIPT LANGUAGE='JavaScript'>
<!--

//--slideLAYERs
var wx=new Array(),wy=new Array(),ex=new Array(),ey=new Array()
var spd=new Array(),step=new Array(),stepX=new Array(),stepY=new Array()
var mvFlag=new Array(),slideID=new Array(),count=new Array()
function slideLAYERs(layName,startX,startY,endX,endY,speed,stpx){

//--移動初期化
if(!mvFlag[layName]){
if(document.layers)clearTimeout(slideID[layName])
count[layName]=0 //--移動回数カウント(ステップ数)
var ofX=(endX-startX) //--移動距離x
var ofY=(endY-startY) //--移動距離y
step[layName]=
Math.max(Math.abs(ofX),Math.abs(ofY))/stpx //--移動ステップ数
stepX[layName]=ofX/step[layName] //--移動量x/ステップ
stepY[layName]=ofY/step[layName] //--移動量y/ステップ
wx[layName]=startX //--移動中のx座標
wy[layName]=startY //--移動中のy座標
ex[layName]=endX //--到着場所のx座標
ey[layName]=endY //--到着場所のy座標
spd[layName]=speed //--移動スピ−ド
mvFlag[layName]=true //--移動中ならtrue
}
if(mvFlag[layName]&&(count[layName]<=step[layName]-1)){
count[layName]++
wx[layName]+=stepX[layName]
wy[layName]+=stepY[layName]
if(document.layers)clearTimeout(slideID[layName])
slideID[layName]=
setTimeout('slideLAYERs("'+layName+'")',spd[layName])
}else{
//--停止
wx[layName]=ex[layName]
wy[layName]=ey[layName]
clearTimeout(slideID[layName]);mvFlag[layName]=false
}
//--移動
if(document.getElementById){
document.getElementById(layName).style.left=wx[layName]
document.getElementById(layName).style.top=wy[layName]
}
else if(document.layers)document.layers[layName].moveTo(wx[layName],wy[layName])
else if(document.all){
document.all(layName).style.pixelLeft=wx[layName]
document.all(layName).style.pixelTop=wy[layName]
}
}

<!---->
</SCRIPT>

</HEAD><BODY>

<DIV ID="test1"
STYLE="position:absolute;
left:10px;
top:10px;
">
<A HREF="javascript:mvFlag['test1']=false;
slideLAYERs('test1',10,10,100,100,10,20)
">
クリックすると移動しますtest1</A>
</DIV>

<DIV ID="test2"
STYLE="position:absolute;
left:50px;
top:100px;
">
<A HREF="javascript:mvFlag['test2']=false;
slideLAYERs('test2',50,100,200,20,10,10)
">
クリックすると移動しますtest2</A>
</DIV>