Javascript関連情報

更新日:2001年03月30日

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

前回のmoveLAYER(idName,x,y)は、指定されたx,yの位置へ一気に移動するための関数だ。でも、たまには、現在位置を基点にして右へ10ピクセル移動したいということもある。そこで、今回は、相対位置移動用のクロスブラウザな汎用関数moveByLAYER(idName,offsetx,offsety)を作ってみた。

|←前のページ |

    Samples

    ★サンプル1 ボタンクリックで文字を相対移動する
    ★サンプル2 ボタンクリックで画像を上下左右へ相対移動する
    ★サンプル3 数字キ-で画像を上下左右へ相対移動する
    ★サンプル4 リンククリックでリンクを相対移動する
    ★サンプル5 リンクをこすると画像が相対移動する
    ★サンプル6 リンクに触っている間画像が移動し離れると止る
    ★サンプル7 フォームで指定した距離だけテーブルを動かす



    応用

    各ブラウザのオブジェクト表記を統一してから処理する方法。
    大きなスクリプトの場合はこの手の方法の方がソースがシン
    プルになる。
    
    function getLayOj( idName ){  
    
      if ( document.getElementById ) 
          return document.getElementById( idName ).style
          
      else if ( document.all )       
          return document.all( idName ).style
          
      else if ( document.layers )    
          return document.layers[ idName ]
      
    }
    
      function moveByLAYER(idName,offsetx,offsety){
    
        var oj = getLayOj( idName )
    
        if(document.getElementById){  //Moz,NN6,IE5用
          oj.left = ( parseInt(oj.left) + offsetx ) + 'px'
          oj.top  = ( parseInt(oj.top)  + offsety ) + 'px'
        }
        else if(document.all){
          oj.pixelLeft += offsetx     //IE4用
          oj.pixelTop  += offsety
        }
        else if(document.layers)
          oj.moveBy(offsetx,offsety)  //NN4用
      }
    
    

    Samples

    ★サンプル1 ボタンクリックで文字を移動する(getLayOj(idName)版)


|←前のページ |

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

あわせて読みたい

この記事の担当ガイド

写真

高橋 登史朗

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

続きを読む

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載! さぁ、いますぐチェック!

人気Javascriptランキング

Powered by 価格.com

デジタル関連コミュニティ

北欧好きが、愛用の北欧モノを見せ合うコミュニティ

メルマガ登録

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

ショッピングカタログ

All About ウェブマガジン

女性向け

雨が楽しくなる!レイングッズ15

男性向け

マネしたくなるアイデア住宅

All About モバイル

QRコード

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

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

知識・経験を生かして、記事を書いてみませんか?