忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[29] [28] [27] [26] [25] [24] [23] [22] [21] [20] [19

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

横スライドで項目が入れ替わるナビゲーション

以前、 bookreaderの記事を書いてからすっかりあのインターフェースに惹かれてしまい、
研究もそっちのけで再現しようとがんばっています。
ついこの前までJavascriptが大嫌いで、全くいじろうともしなかった私がここまでのめりこむとは…。
人生何があるか分かりませんね。


今日は、2007年9月号のWebCreators(MDN)の
「スタイルシート&Javascriptで表現するデザインパーツ62」の特集の、
64ページ「横スライドで項目が入れ替わるナビゲーション」を作成。


WebDesigning(マイコミ)は、かなり前に発行された書籍に関してもサンプルデータが残っていて、
書籍さえあればダウンロードできるようになっているのですが、
WebCreatorsはもう既に海の藻屑と化していたので、
打ち込み&間違いなおしにとっても時間がかかりました。

64ページの例では、項目のスクロールをリンクボタンでおこなっていたのですが、
bookreaderのようにキーボードでスクロールするようにしたくて
改変に改変を重ねてようやく完成しました。
作例はとてもお見せできるモノではないのでここにはあげませんが…

詳しくはbookreaderっぽいインタフェースのサイト記事へ。


本日とても役に立ったサイト
クロスブラウザでのJavaScriptキーボードイベントの扱い方

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
はじめまして
サンプル拝見しました!

僕もJスクリプトははじめは嫌いだったのですがこういった手法はのめり込みますよね!

参考になりました!
また訪問させて頂きます。
keisuke_satou URL 2010/07/01(Thu)15:27:41 編集
Re:はじめまして
>keisuke_satouさま

ご感想ありがとうございます!
かなり昔に書いたものなのでつたない箇所が多々あるかと思いますが、参考にしていただければ幸いです。

今後ともどうぞ宜しくお願いいたします。
【2010/07/03 00:10】
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
06« 2017/07 »08
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
ブログ内検索
忍者ブログ [PR]