タグ

座標に関するshiiiiirのブックマーク (3)

  • 【jQuery】マウスの座標をjQueryを使って調べる方法! - Web.fla

    マウスに追従するようなツールチップなどを作るときにマウスの座標ってどう取得するかをメモ。 動作結果(スクリプトはブラウザのソースコードから参照) 関数にイベントハンドラを引数に渡してイベントからclientX・clientYで取得 いつもは普通に「function(){}」と記述していたけどイベントオブジェクトを取得したいときやイベントオブジェクトを操作した時などは「function(e){}」といった感じで引数にイベントを指定 //通常は下記のような記述 jQueryオブジェクト.mousemove(function(){}); //イベントターゲットや操作したいとき jQueryオブジェクト.mousemove(function(e){ alert(e.target); //イベントターゲットとなるdomElement名が表示される }); clientXとclientYでマウス座標を

    【jQuery】マウスの座標をjQueryを使って調べる方法! - Web.fla
  • HTML要素の位置取得 - elm200 の日記(旧はてなダイアリー)

    趣旨 ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。 情報ソース この問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇 である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。 基中の基として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode

    HTML要素の位置取得 - elm200 の日記(旧はてなダイアリー)
  • offsetTop/offsetLeft/offsetParentの闇 - Backstage of theater.js

    簡単な定義 要素のoffsetLeftプロパティ 要素の左辺と、offset基準要素の左辺との距離(px) 要素のoffsetTopプロパティ 要素の上辺と、offset基準要素の上辺との距離(px) 要素のoffsetParentプロパティ 要素のoffset基準要素(これが何になるかが問題) ○結論から先に見たい方は>>こちら<<○ いままで、なんとなくoffsetTopやoffsetLeftを使っていました^^; これらは「ページ上の要素の位置」を格納してると思って。しかし、よくよく調べてみるとそれは誤りであり、かつかなり複雑でややこしいプロパティであることが分かってきました。*1 もともと、(ここでは述べませんが、offsetHeightとoffsetWidthも含め)offset〜のプロパティはIEがVer5で独自に実装したものらしく、その後他のブラウザが追随して実装したようです

    offsetTop/offsetLeft/offsetParentの闇 - Backstage of theater.js
  • 1