これは面白い。Amazonのメニュー表示の仕組みをjQueryで実装·jQuery-menu-aim MOONGIFT
jQuery-menu-aimはAmazonの右上メニューの動作を真似たjQueryライブラリです。 このソフトウェアを見てはじめて気がついたのですが、Amazon.(co.jp|com)の左上にあるメニューはとても面白い動きをしています。一階層目のメニューはマウスオーバーで二階層目の内容がリアルタイムに反映されるのですが、二階層メニューにマウスポインタを動かす際に多少別なメニューに被ったとしても内容が変わりません。それをjQueryで実装したのがjQuery-menu-aimです。 クリックでメニューを表示。 マウスを下に移動すると右側に項目を表示します。 反応はとてもいいです。 通常であれば二階層目の表示反映タイミングを遅らせるようにするか、マウスの動きに過敏に反応して二階層目に移行したら別なメニューの内容を表示してしまった、なんてことになりかねません。縦と横の動きをうまくキャッチする
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
jQueryで要素の高さを取得しようとするとGoogle Chromeでうまく出来ない時の解決法｜株式会社アクトゼロ｜クリエイティブブログ
少しはまったのでご紹介します。 要素の高さを取得する jQueryで要素の高さをとるのは簡単です。 これだけ！ しかし、何故かGoogle Chromeでは正しい値を取得できません。 Google Chrome対策 少し調べてみると、Google Chromeでは画像等の要素を読み込む前に上記のJSが動いてしまうため、 正しい数値を得られないとのことです。 ですので、画像の読み込みが終わってから高さを取得するように書き換えます。 IE対策 上記のコードに書き換えると今度は昔のIEで動作しなくなってしまったので、 Google Chromeと別のブラウザで取得方法を異なるように書き換えます。 ユーザーエージェントでGoogle Chrome用と他のブラウザ用に書き分けました。 これでバッチリ高さを取得できます。 同じように横幅も同様の方法で可能です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
