category
サイト構築 -JavaScript

[JS]打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプト

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

YouTubeで実装されているプレイヤーのサイズ変更のように、打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプトをJanko At Warp Speedから紹介します。

実装のイメージ

Create YouTube-like adaptable view using CSS and jQuery
実装したデモページ

デモページでは下記のように、打ち出しエリアのサイズが任意で変更することができます。

デモのキャプチャ

打ち出しエリア:ノーマルサイズ

デモのキャプチャ

打ち出しエリア:ワイドサイズ

各パネルの実装はシンプルで、下記のようなHTMLとなっています。

また、サイズの可変にはjquery.jsが使用されています。

Post on:2009年11月10日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

ページの先頭へ




© coliss

RSS