Javascript関連情報

更新日:2001年03月16日

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

JavaScriptでDHTMLを使うと文字や画像やフォームなどHTML要素の位置を自由に変更することができる。画面外の位置へ変更して見えなくしたり、連続して位置を変えることで動いているように見せることも可能だ。今回は、とりあえず、移動をクロスブラウザに実現するため基本的な汎用関数moveLAYER(idName,x,y)を作ってみた。

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

    Samples クリックで移動

    ★サンプル1 ボタンクリックで文字を移動する
    ★サンプル2 ボタンクリックで文字を(見える位置へ移動して)出す
    ★サンプル3 ボタンクリックで(見えない位置へ移動して)文字を消す
    ★サンプル4 リンククリックでリンクを(見える位置へ移動して)出す
    ★サンプル5 リンククリックで画像を(見える位置へ移動して)出す
    ★サンプル6 ボタンクリックで文字を出す/消す
    ★サンプル7 リンククリックで画像を出す/消す
    ★サンプル8 リンククリックでリンクを出す/消す
    ★サンプル9 ラジオボタンクリックで画像を指定位置へ移動する
    ★サンプル10 リンクに触ると画像がするするっと移動する
    ★サンプル11 クリックした場所へ画像が移動する

    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 moveLAYER(idName,x,y){
    
       var oj = getLayOj( idName )
          
          if(document.getElementById){          //Moz,NN6,IE5用
            oj.left=x
            oj.top=y
          }
          else if(document.all){
            oj.pixelLeft=x                       //IE4用
            oj.pixelTop=y
          }
          else if(document.layers)oj.moveTo(x,y) //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がケータイで読める!

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

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