*

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

公開日: : 最終更新日:2016/01/24 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)である直前の
  祖先要素を基準にした位置を返す。

スポンサードリンク

関連記事

catejQuery

マウスの動きに合わせて処理を行うmousemove()

この命令は、特定の要素上でマウスカーソルが 動いたときに処理を行います。 mousemove

記事を読む

catejQuery

設定されたイベント処理を消す

設定されているイベント処理を取り消すには off()命令を使います。 $( セレクター ).

記事を読む

catejQuery

ストライブテーブルを作成する。

ストライプテーブルとは、1行(列)おきに、異なる色を敷いた テーブルの事です。偶数行(列)、奇数行

記事を読む

jQuery

CSSプロパティの設定と値の取得

jQueryで、シンプルにCSSのプロパティの値を設定したり、取得したりできます。CSSを操作すると

記事を読む

catejQuery

ページトップへスムーズにスクロールさせる。

今回は、ボタンをクリックしたら ページのトップへ滑らかに遷移するというものを jQueryを使っ

記事を読む

jQuery

タブを作成して、空間を最大限に使う

今回はパネルを使って、複数のコンテンツを1つのエリアに配置して、ブラウザ上部に設けたタブをクリックす

記事を読む

catejQuery

複数の命令をまとめて書く メソッドチェーン

HTML,CSSの命令を書いてきました。 今回紹介するのが「メソッドチェーン」と呼ばれるものです。

記事を読む

catejQuery

マウスオーバー、マウスアウトを感知する mouseover()・mouseout()

マウスオーバー、マウスアウトを感知する mouseover()・mouseout() これら

記事を読む

catejQuery

表示中の要素を非表示にする hide()

hide()は、show()の逆の命令です。 表示されている状態(display:block)のH

記事を読む

jQuery

jQueryで聖剣伝説に出てくるリングメニューを作ってみる

タイトルの通り、聖剣伝説で登場する円状に広がるリング状のメニューを今回紹介します。 サンプルコード

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑