前の記事 ≪：PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho...
次の記事 ≫：Windows7風ナビゲーション作成チュートリアル

ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」

2009年10月26日-はてなブックマーク

スポンサード リンク
ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。
このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。
以下にその機能を紹介してみます。

活用例１ 背景画像自動
背景画像をブラウザサイズ変更に合わせて自由に伸縮


ブラウザのサイズを変えても違和感がないようにすることが可能


活用例２ ブラウザ幅にあわせた画像の自動伸縮
ページの右端に画像があって、自由に伸縮します。


サイズを変えてもこの通り、画像が残りスペースのサイズになります


活用例３ ブラウザ幅に合わせる、がオリジナルのサイズがMAXにする
活用例２と同じで、ブラウザの端にあって、ブラウザサイズに応じて伸縮します


ブラウザを広げても、オリジナルのサイズよりは大きくなりません。


活用例４ 伸縮してもサイズ調整される背景にしつつ、更にスライドショーする
背景のスライドショー機能。単に切り替わるだけじゃなく、アニメーションします。


↓↓背景が時間とともに切り替わります↓↓



以下のエントリを参照してください。
jQuery maxImage plugin: Demo

関連エントリ
関連の記事検索：jQuery, JavaScript, 画像, plugin, Webデザイン, 背景画像
スポンサード リンク

By.KJ : 2009年10月26日 09:59 ブックマークに追加する livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)