slideLAYERs()
レイヤーを指定したスタート位置から指定した終了位置へスライド移動させるためのサンプルファンクションです。位置はぺージ左端からのX座標と上端からのY座標をピクセルで、間隔は1/1000秒単位で指定します。これは複数のレイヤーを一度に動かせます。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
*Mac/Linux版Opera6ではonclick="命令"だけだとリロードがかかり初期化してしまうのでonclick="命令 ; return false" という記述が必要です。
Syntax :
slideLAYERs('レイヤ−名',スタート位置X,スタート位置Y,終了位置X,終了位置Y,間隔,ステップ数)
//e4,e5,e6,n4,n6,n7,m1,o6,o7,s1用
var wx=new Array(),wy=new Array(),count=new Array()
var ex=new Array(),ey=new Array(),spd=new Array()
var step=new Array(),stepX=new Array(),stepY=new Array()
var mvFlag=new Array(),slideID=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]=stpx //--ステップ数
stepX[layName]=ofX/stpx //--移動量x
stepY[layName]=ofY/stpx //--移動量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.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]
}
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
}
}
Example
<script type='text/javascript'>
<!--
//e4,e5,e6,n4,n6,n7,m1,o6,o7,s1用
var wx=new Array(),wy=new Array(),count=new Array()
var ex=new Array(),ey=new Array(),spd=new Array()
var step=new Array(),stepX=new Array(),stepY=new Array()
var mvFlag=new Array(),slideID=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]=stpx //--ステップ数
stepX[layName]=ofX/stpx //--移動量x
stepY[layName]=ofY/stpx //--移動量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.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]
}
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
}
}
//-->
</script>
</head><body>
<div id="test1"
style="position:absolute;
left:10px;
top:10px;">
<a href="#" onclick="slideLAYERs('test1',10,10,100,100,10,20);return false">
クリックすると移動しますtest1</a>
</div>
<div id="test2"
style="position:absolute;
left:50px;
top:100px;">
<a href="#" onclick="slideLAYERs('test2',50,100,200,20,10,10);return false">
クリックすると移動しますtest2</a>
</div>