Ajaxでおしゃれな小窓を作る6つのサンプル*ホームページを作る人のネタ帳

Ajaxでおしゃれな小窓を作る6つのサンプル

スポンサードリンク

これはなかなかおしゃれな小窓が作れそう。

ウェブサイトでちょっとしたお知らせなどを入れる時に役に立つと思います。
特に、フォームを利用しただけではあまりおしゃれなものになりませんので、この技術を応用してみてはいかがでしょうか。

６つのサンプル

試しにサンプルファイルを開いてみれば、一通り使えると思いますよ。

サンプル１

マウスによるロールスクロールは出来ない。
矢印にマウスを乗せるとスクロールする。

サンプル２

スクロールバーを左に配置。ボタンデザインをこったものに出来るサンプル。

サンプル３

スクロールバーを右に配置しているが、特殊なバーに加工している。

サンプル４

上のサンプル３に、タブを追加したバージョンです。

サンプル５

上のサンプル４に、さらに右側にリンクによるナビゲーションを追加したバージョン。
リンクナビゲーションをクリックすると、中のスクロールもそこまで移動するという代物。

サンプル６

上記サンプルの技術をつかった美しいサンプル。

ダウンロード

jsScrolling
こちらから移動し、『jsScrolling.zip』をクリックすればダウンロードできます。

ウィンドウ

ダウンロードしたファイルには、jsファイルが入っており、これらを呼び出すことで使用できます。

是非勉強ついでにダウンロードしてみるといいかもしれませんね。

新ブログ：ITクオリティもよろしく。
スポンサードリンク

はてなブクマ

私の他のブログの更新状況

RSS表示パーツ

» Photoshopちょいテク『惑星を作ってみよう』＋360度パノラマ画像も作れるように
» 最近、ブログを書いている途中に筆が止まる理由がわかった気がする
» ブログエントリ別に見る『注目度10の法則』
» 天才という言葉は、生きている人にいう言葉じゃない気がする
» まるでphotoshop！JavaScriptで実装するクールなカラーピッカー[prototype.js]
» 今後の期待度が高いphotoshopブラシまとめサイト『Quality Brushes for Photoshop』
» FLASHサイト作成インスピレーションの参考になるflashサイト7つ
» あの時、何気なく吸い始めた一本のタバコの値段が900万だと知ったとき
» jQueryサンプル公開後の反省会。みなさんからのアドバイスを5本サンプル化
» [追記]数百件先の画像まで一気に検索してしまうインターフェイスを搭載したfirefoxアドオン
» プロとアマの違いってぶっちゃけたったひとつ
» 一晩で覚えるjQueryの逆引き基礎サンプル7つ
» あなたは大丈夫？知らず知らずのうちに感じている10のパソコンストレス
» よごれた感じのフォトショップチュートリアルとブラシ
» 第2回web開発者インタビュー。マチウケメール便開発者『開発環境はeclipseです！』