スポンサーリンク
スポンサーリンク

空間を最大限に使いトップページの画像をタブで切り替える。

jQuery

今回、書くのは、
トップページに複数の作品を乗せたいときに、
スクロールさせず、画面上部に配置したタブを
切り替えることにより、表示させるものを
切り替えるjQueryを作成します。

分かりにくいので、実行を結果をご覧ください。

サンプルコードの実行結果はこちら

画面上部の「Work」を押すとアニメーションをつけて
表示される文字列が切り替わるのは確認できます。

style.css

index.html

manyTabs2.js

position()とoffset()の違いって???

position()メソッドはoffset()と同じように、
「要素の位置を取得するメソッド」で、
topプロパティ(上からの距離)、leftプロパティ(左からの距離)を
保持しています。

以前のスティッキーヘッダーの記事で出てきた
offset()メソッドの違いは下記の通りです。

1.offset()メソッドは、ドキュメントを基準にした位置を返す
2.position()メソッドは、positionプロパティの値が
  static以外(fixed,absolute,relative)である直前の
  祖先要素を基準にした位置を返す。

コメント

タイトルとURLをコピーしました