Javascript関連情報

更新日:2001年04月06日

クロスブラウザを制する Part 2 2-2 位置/移動 top left (3)

複数のレイヤーを同時にスライドさせる関数。スタートの位置と止める位置、スピードなどを指定すれば簡単にスライドさせることができる便利な関数。


| ★こんなことが出来ます(サンプル) | 今回は複数のレイヤーを同時にスライドさせる関数だ。スタートの位置と止める位置、スピードなどを指定すれば簡単にレイヤーをスライドさせることができる便利な関数slideLAYERs()だ。関数の中身はいじる必要が無い。コピーするだけでできちゃうぞ。

*

slideLAYERs('layer名',開始位置X,Y,終了位置X,Y,スピ-ド,ステップ)
Win n4 n6 moz e4 e5 e6 o6,
Mac n4 n6 moz e4.5 e5 ,
Linux n4 n6 moz
レイヤーを指定したスタ-ト位置から指定した終了位置へスライド移動させるためのサンプルファンクション。位置はぺ-ジまたはブロックの左端からのX座標と上端からのY座標をピクセルで、スピ-ドは1/1000秒単位で指定します。
<script language='JavaScript'>
<!--

/*////////////////// slideLAYERs-UseFree- //////////////*/
  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>

<!--クリックすると↓このレイヤ-が移動する-->
<div id = "test0" 
 style="position   : relative ;
        top        : 0px      ;/*--←top,leftは必須--*/
        left       : 0px      ;
        font-size  : 24pt     ;
">
<a  href="javascript:
    slideLAYERs('test0',10,10,200,-250,10,20)">
動くよ</a>
</div>
                                                
上記サンプルは リンククリックのタイミングで slideLAYERs('test0',10,10,200,-250,10,20) を起動し、"test0"というDIVを動かしている。 指定する必要があるのは、'レイヤ-名'、スタ-ト位置X、スタ-ト位置Y、終了位置X、終了位置Y、スピ-ドの6つだ。 Mac版IE4.5とMoz/N6ではインラインでtopとleftをあらかじめ指定しておく必要がある。


★次のページにサンプルと応用スクリプトを用意しました。 
| 次のページ→| シリーズ目次 |



<--> |←前のページ | シリーズ目次 |
Samples

★サンプル1 ボタンクリックで文字をスライドする
★サンプル2 ボタンクリックで複数の文字をスライドして集める
★サンプル3 ボタンクリックで文字を(見えない位置から)出す
★サンプル4 ボタンクリックで文字を(見えない位置へ)消す
★サンプル5 リンククリックで画像を(見える位置へ)出す
★サンプル6 ボタンクリックで文字をスライドして出す/消す
★サンプル7 ボタンクリックで画像をスライドして出す/消す
★サンプル8 ページへ入るとタイトルが集まってくる
★サンプル9 リンクに触るとメニューテーブルがスライドして出てくる
★サンプル10 画面をクリックすると画像がマウスの位置までスライドする




|←前のページ | シリーズ目次 |

参考 : DynamicHTML/cross-browser Examples <-->
  • 印刷する
  • ブックマークする
  • 携帯に送る
  • ブログに書く

あわせて読みたい

この記事の担当ガイド

写真

高橋 登史朗

Javascriptをはじめ、Ajax、jQueryの著書多数のガイドが、何かと最近騒がれているJa…

続きを読む

人気Javascriptランキング

Powered by 価格.com

おすすめ記事

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

All About モバイル

QRコード

All Aboutがケータイで読める!

オススメ記事をメールでチェック