スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【AJAX+JavaScript】縦(垂直)方向にリストを移動させる

縦型のグローバルナビを画像にする場合で、数が無制限に増えていくようなコンテンツを扱うときに、表示数を決めてアーカイブはスクロールで見えるようにしようか、と思った時に使えるAJAXサンプルのメモ。

スタイルシートでロールオーバーを実現する方法をある程度習熟していることが前提となります。こちもいずれサンプルを作って配布します。

■サンプル

ファイルをダウンロード[134KB]
※ダウンロード用ファイルには万全を期しておりますが、ファイルのダウンロード及び使用に関しては一切の責任を放棄いたします。自己責任でお願いいたします。

以下のブラウザでチェック済み
IE6.0/IE7.0/IE8.0/Safari4.0/FireFox3.5/Chrome5.0

■解説
jQueryのプラグイン「jcarousel」を使用した縦型ナビ。
JavaScriptのコードが分からない方でも画像の変更とHTML及びCSSの変更のみで機能はそのままに見た目を変えられる便利なAJAX

-変更する手順--------------------------------------------
【1】上下ボタンとスクロール表示する画像の作成
→上下ボタン
ロールオーバー時の動作用として通常時、ロールオーバー時、アクティブ時用の画像を3つ並べて作ります。


※見切れてますね…意味が分からない方は実際の/images/scroller/内にある画像をご覧ください。
※タテヨコサイズを変える場合はCSSもあわせて変更する必要があります。

→スクロール表示する画像


【2】HTML(scrollcheck.html)の画像を指定している部分の変更
<li><a href="#"><img src="images/scroller/1.gif" width="172" height="60" alt="" /></a></li>

お好きな画像に変更してください。
※タテヨコサイズを変える場合はCSSもあわせて変更する必要があります。

【3】CSSの属性を記述している部分の変更
skin.cssやstyle.cssなどで見栄えを調整。
cssファイル内にどこに影響が出るかのコメントをつけておきましたので、見ながらやってみてください。


-個人的な使用状況と見解---------------------------------------
結局、これは古い物がファーストインプレッションで見れないため、ユーザーにとって上質な情報かつ次々みたいと思うようなコンテンツにしか使用するべきでないと判断し、未採用。個人サイトなら漫画サイトや絵日記サイトのナビ、企業サイトなら動画ページのサブメニュー、映画サイトならキャストページなんかに使うにはもってこないかもしれない。

横バージョンもいずれ紹介します。

※javascriptは専門職ではないため、動作確認に関しては遅れがちです。
 動作しない環境がありましたら、ご一報いただければ幸いです。
スポンサーサイト
ワンコウォッチ
プロフィール

AGOSO

Author:AGOSO
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
ワンコウォッチ[ベリー・レッド]
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。