忍者ブログ

19Jan

[PR]

Posted by in

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

13Jun

画像の右下から位置を指定して配置

Posted by No Name Ninja in Javascript Sample

座標は常に左上から始まりますが、『ウィンドウの大きさに合わせて右下から』という手法です。
SAMPLE
解説

<script language="javascript" type="text/javascript">

onload = moveImg;
onresize = moveImg;

function moveImg(){

  var obj = getSize();
  var curImg = document.getElementById('imgTest');
  curImg.style.top = (obj.height - curImg.height) + 'px';
  curImg.style.left = (obj.width - curImg.width) + 'px';
}

function getSize(){
  var wdh = 0;
  var hgt = 0;

  //基本はwindowを記述しないが、I.E.の場合エラーが発生する。
  if(!window.innerWidth){
    //I.E.用。(document.body.client・・)はI.E.6以前のバージョン
    wdh = document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth;
    hgt = document.documentElement.clientHeight?document.documentElement.clientHeight:document.body.clientHeight;
  }else{
    wdh = window.innerWidth;
    hgt = window.innerHeight;
  }

  return {width:wdh, height:hgt}
}

</script>

ブラウザの描画画面の幅、高さを取得します。
I.E.以外のブラウザでは、以下のプロパティです。
・window.innerWidth;
・window.innerHeight;

『windowは省略可能のはず』なのですが、I.E.の場合、そんなプロパティがないので、変数と勘違いしてエラーを出すことがあります。なので、windowのプロパティを指定する場合は、例外として記載しておいたほうがよいです。
I.E.の場合は以下となります。
(I.E.7以降)
・document.documentElement.clientWidth
・document.documentElement.clientHeight

(I.E.6以前)
・document.body.clientWidth
・document.body.clientHeight


上記プロパティで取得できますので、そこから画像の幅、高さを減算すれば、右下に画像を貼れるわけです。
画面がリサイズされたときにも再処理するように設定しています。
onresize = moveImg;
PR

Comment


Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback