jQueryでメニューのマウスオーバーをかっちょよくするJavaScript「jQuery Background Position」
twitter facebook hatena google pocket かっちょよくシリーズ第２弾。。。 jQueryを使用してメニューのマウスオーバーを印象的にしてみます。 via：jQuery Background Position sponsors 使用方法 jQuery Background Positionからjquery.bgpos.jsをjQueryからjquery.jsをダウロードします。 次にこんな画像を用意します。 次に以下のようにjsを記述します。 <style> ul {list-style:none;margin:0;padding:0;} li {float:left;width:100px;line-height:25px;height:25px;margin:0;padding:0;text-align:center;} li a {background
画像が浮き上がるjQueryを使ったイメージギャラリー:phpspot開発日誌
jQuery Image Effects - Hover Effect w/ jQuery & CSS - jQuery Tutorial 画像が浮き上がるjQueryを使ったイメージギャラリー。 デモページのようなギャラリーを作成できます。 jQueryで小気味よくアニメーションするところがなかなかよいです。 ちょっとしたところで使えそうですね。 関連エントリ jQueryを使ったFlashばりにクールなギャラリー「GalleryView」 訪問者驚きの手めくり風、画像ギャラリー作成サンプル 滑らかに画像が切り替わる超絶クールFlash写真ギャラリー「imagin」
[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。
第 8 回目は「CSSを使った見栄えの良いフォーム」です。 フォームまわりは、各ブラウザによってかなり差異があります。 よって CSS だけで見栄えをよくしようとすると、結構手間だったります。 例をあげると magin・paddingが異なる borderの線がでない 背景が画像があたらない などなど そんな時に便利なのが 「niceforms」 という javascriptライブラリです。 すいませんが、今回だけは javascript を使わせてください。 niceforms のサンプルはこちら 導入方法 まずは、niceforms をダウンロードします。 次に、必要な jsファイル および cssファイル をインクルード。 <script language="javascript" type="text/javascript" src="niceforms.js"></script>
![[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
jQuery入門（その1）（1/7）：CodeZine
はじめに 実を言うと、私はずっとJavaScriptを嫌っていました。JavaScriptのコードを書くのが嫌でしたし、いろいろなブラウザに対応するために大量のスクリプトコードを使わなければならないのも嫌でした。そうした点は今でも変わらないのですが、最近になってJavaScriptへの理解が深まったことと、jQueryという小さなJavaScriptクライアントライブラリのおかげで、クライアント中心のAJAXスクリプトコードを書かなければならないときでも恐怖を抱かなくなりました。それどころか、今では喜んで引き受けるほどになっています。クライアントロジックがもっと複雑になり、ブラウザの機能や実装の多様化がさらに進んだとしても、jQueryをはじめとするクライアントライブラリが、JavaScriptやHTML DOMを扱う際に必要な正規化を提供してくれます。 私はJavaScriptの初心者と
Switch Display Optionswith CSS & jQuery - by Soh Tanaka
Image Name Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. Image Name Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfo
HOKYPOKY. | MULTICOL. jQuery Plugin
MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。 もちろん、日本製のプラグインなので日本語もきれいに段組みにします。 一 或春の日暮です。 唐の西の門の下に、ぼんやり空を仰いでいる、一人の若者がありました。 若者は名を杜子春といって、元は金持の息子でしたが、今は財産を費な身分になっているのです。 何しろその頃洛陽といえば、天下に並ぶもののない、繁昌は、まるで画のような美しさです。 しかし杜子春は相変らず、門の壁に身を凭かと思う程、かすかに白く浮んでいるのです。 「日は暮れるし、腹は減るし、その上もうどこへ行っても、泊めてくれる所はなさそうだし——こんな思いをして生きている位なら、一そ川へでも身を投げて、死んでしまった方がましかも知れない」 杜子春はひとりさっきから、こんな取りとめもないことを思いめぐらしてい
タブで写真切り替え
About Contact Top Places for Bakersfield Hookups: Meet Singles NearbyLooking for casual Bakersfield hookups? This guide will show you the best places to meet singles ready for some fun. From lively bars to popular dating apps, we’ve got you covered on where to find your next exciting encounter. Key TakeawaysBakersfield is a hotspot for casual hookups with vibrant bars, nightclubs, and various soci
MOONGIFT: » JavaScriptで画像をズーム「Magic Zoom」:オープンソースを毎日紹介
※ 画像は公式サイトデモより Eコマースサイトでは数多くの写真を使うが、それだけでは詳細が分かりづらいということは多々ある。そのため、各部を拡大した画像をリストアップして対応しているサイトもあるだろう。だが、それはユーザが本当に希望する場所とは限らない。 バイクの画像（左）とその拡大画像（右） そこで画像の拡大をユーザに任せてしまうのはどうだろう。サイト側は極力大きな画像を用意するだけで良い。 今回紹介するフリーウェアはMagic Zoom、JavaScriptによる画像拡大ライブラリだ。個人の非商用利用に限り無料なのでご注意をいただきたい。 Magic Zoomは画像の上にマウスを乗せると、右側に拡大された画像を表示してくれる。マウスを動かせば、拡大される場所も変更される。複数画像を切り替える機能もあり、例えば色違いやパターンが違う商品の表示に使える。 複数の画像を切り替える機能も便利だ
miniturbo.org - Safari 3.1のWebインスペクタが便利
昨日、Safari 3.1がリリースされたようです。 「パブリックベータ」もいつのまにかなくなり、メニューなども日本語表示となりました！ で、早速使ってみたのですが、「開発」メニューにあるWebインスペクタが便利すぎてたまりません。 こんな感じで、ドキュメントをDOMツリーで展開しながら、要素の詳細を見たり、 こんな感じで、コンソールから直接JavaScriptを実行できたりします。 ちなみに、Firebugと同じくconsole.log関数などが使えるみたいです。 Selectors APIも動くみたい。これ便利すぎる。 ファイルのやりとりをグラフィカルに表示。とてもキレイでいいですね。 ファイルの種類によって色分けがされていて、とても見やすいです。 まるでSafari版Firebugですね。みなさんもぜひ使って見てください！
MOONGIFT: » JavaScriptだけで画像イフェクト「Bevel.js」:オープンソースを毎日紹介
サイトの画像を角丸にしたり、影をつけたりするのは良くあることだ。単なる画像も、多少の変化をつけるだけで見栄えがずいぶん変わってくる。だが、一つの一つの画像にそうした変化をつけるのは面倒で、徐々にやらなくなってしまう。 そこで自動化を考えたい。とは言ってもサーバサイドではない。クライアントサイドで行うのだ。 今回紹介するフリーウェアはBevel.js、JavaScriptで画像にイフェクトを行うライブラリだ。元々Public Domainだったが、変わったようで、非営利の個人利用に限りフリーとなっている。 Bevel.jsを使うと、画像の角を丸くしたり、そこにさらに影を付けたりと言ったイフェクトをJavaScriptのみでできるようになる。ふちを暗くしたり、別な色にすることも可能だ。まるで画像編集したかのようだ。 対応しているブラウザはFirefox 1.5以上、Opera 9以上、IE 6
MOONGIFT: » JavaScriptを使ってCSSを拡張「MoreCSS」:オープンソースを毎日紹介
※ 画像は公式サイトデモより 最近のWeb開発は単純なタグ構成をCSSを使って装飾していくという形式が多い。確かに開発側にとっても単純な構造は分かりやすく、CSSで見た目を変更できるのはデザインとシステムの分離ができ、効率的だ。 そしてこのソフトウェアはそれをさらに発展させてくれる。 今回紹介するオープンソース・ソフトウェアはMoreCSS、CSSを拡張するJavaScriptライブラリだ。 JavaScriptでCSSを拡張とはどういうことだろうか。例に出すと、例えばテキストボックスにデフォルトで「Search...」という文字を出したいとする。通常、JavaScriptを使ってonClickなどを定義すると思うが、MoreCSSを使えば「default-value:"Search …";」という定義をCSSに書いて、そのIDを当てはめるだけで良い。 他にも同じサーバ内の文字列を拾ってき
MOONGIFT: � クールに表示「Shadowbox.js」:オープンソースを毎日紹介
※ 画像は公式サイトのデモより 画像や動画などを見せる際に、デフォルトでサムネイル、クリックで拡大や再生というのはよくある方法だ。だが、その際の方法には気をつけないといけない。毎度リンク先に飛んでしまっていては、見ている方も疲れてしまう。 その点、Highslide.jsに代表されるサムネイル画像をスムーズに拡大するJavaScriptファイルは便利だ。そしてそれを拡張し、様々なファイル形式に対応したのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはShadowbox.js、多種多様なメディアに対応したビューワーだ。 Shadowbox.jsは画像はもちろん、動画などを同一画面ないでスムーズに拡大表示、再生できる。複数の画像や動画にも対応し、ナビゲーション付きで簡単に切り替えて表示できるようにもなる。 特に面白いのはイメージマップへの対応だ。画像内にFlickrのように四角
MOONGIFT: » Amazon風のスライドを実現「jCarousel」:オープンソースを毎日紹介
Amazonの商品詳細ページなどで使われている、関連商品のスライダー。格好が良く、ついつい色々見てしまい、あげくに購入してしまった、なんて経験がある人もいるのではないだろうか。 通常、縦スクロールを使って動くのが当たり前のWebページにおいて、横の動きが与えるインパクトは大きい。そこで試してみたいライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはjCarousel、JavaScriptベースのスライダーライブラリだ。 jCarouselは画像を横に並べて左右のスライダで画像を切り替えることができる。まさにAmazonで提供されているあのスライダを実現できるライブラリだ。様々なオプションが存在し、自分の使い勝手に合わせた利用法ができる。 例えばサークルを選ぶと左右がつながってループする。戻るアクションの場合は、端までいきつくと逆の端まで一気に動く。他にも左右のスライダではなくペ
MOONGIFT: » サイトにRSSをスクロール表示「Pausing RSS scroller」:オープンソースを毎日紹介
ニュースのヘッドライン調の表示は格好がいい。ただ一覧表示するのに比べて、表示がダイナミックに切り替わる分、目を引きやすい。 そんな表示をあなたのブログパーツとしていかがだろう。ライブラリを使えば簡単だ。 今回紹介するフリーウェアはPausing RSS scroller、RSSをヘッドライン調にスクロールさせるライブラリだ。ソースは公開されているが、ライセンスは明記されていないので注意して欲しい。 Pausing RSS scrollerは横型と縦型の二つの表示方式をサポートしている。PHPを使って外部のRSSを取得し、それをJavaScriptを使って表示する。 一つの記事ごとに表示が下から上に流れて切り替わる。横型の場合はタイトルだけが良いが、縦型の場合は概要も一緒に表示するようにすると奇麗だ。表示時間や表示項目も設定可能だ。 ただ表示するだけではインパクトが薄いが、スムーズに動かした
サイトにツアーをつけよう·Amberjack MOONGIFT
はじめてサイトを訪れた人は、そのサイトで何をどうしたら良いか分からない状態だ。度重なるバージョンアップによって、ボタンや画面構成が分かりづらくなると特に混乱させる原因になる。 そこでツアーを作ることをお勧めする。サイトの各機能について画面を交えながら説明するのだ。最近は動画で案内するサイトも増えてきたが、これでは時間がかかってしまったり、ユーザの知りたい所とはずれる可能性もある。そこでこれだ。 今回紹介するオープンソース・ソフトウェアはAmberjack、サイトツアーを作るためのJavaScriptだ。 Amberjackを使ったツアーを作成すると、サイトの画面とともに右上にウィンドウが表示される。これがツアーの案内をする。 ツアーをしている最中はサイト画面はグレーアウトされ、クリックできない状態になっている。説明をみつつ、画面と見比べて確認できるようになっている。 そして、ツアーのウィン
[JS]ページをめくったような効果を出すスクリプト -curl.js | コリス
curl.jsは、先日エントリーした「画像に鏡面効果を与えるスクリプト」と同じ作者が作成した、画像にページをめくったような効果を出すスクリプトです。 curl.js (with IE 6/7 support) 画像にページをめくったような効果を与えるには、curl.jsを外部スクリプトとして記述し、画像にclass指定をします。 classには、デフォルトの「curl」、サイズ変更ができる「isize」、色を変更できる「icolor」、影をつける「ishadow」があり、数値を入れ微調整をすることも可能です。 マウスのホバーやクリックなどのアクションにも対応しており、その場合は「cvi_curl_lib.js」を使用します。
つゆだくのJavaScript(Ajax)・スタイルシート
スポンサードリンク スタイルシート・JavaScript(Ajax)サンプル集 AJAXをはじめる方のページ Yahoo! User Interface Library Yahoo!が提供しているLibrary。AJAXはもちろん、Event操作、ドラッグ＆ドロップ、アニメーションなどWeb2.0がこれひとつで完結。 2007.03.30 - yui_2.2.0a に更新 Spry framework for Ajax Adobeが提供しているLibrary。AJAXというと大抵データを取ってくるところまでがLibraryの仕事だが、これはデータ表示の部分までやってくれるすぐれもの。サンプルではRSSリーダーを作成。 個人的なサンプルページ 疑似的フレーム スタイルシートでフレームっぽくみせるテクニック。さらにJavaScriptでフレームの配置を変更するなんていうこともやっている。 ポッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
超クールなタブインタフェースをjQueryで作成するチュートリアル:phpspot開発日誌
Runtime error
http://www.unbland.net/blog/archives/2007/09/17113616.php