少しのコードで実装可能な20のjQuery小技集
少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ 追記：この記事で紹介されているいくつかの方法が、今では CSS のみで実装可能です！詳しくは「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」をご覧ください。 jQuery の基本的な使い方まずはjQuery 本家から jQuery ファイルをダウンロードします。<head> 内に下記を記述し、jQuery ファイルを読み込みます。 <script type="text/javascript" src
[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre
雑誌をめくる「Pege Flip」のエフェクトで画像を次々に表示するjQueryのプラグインを紹介します。 mLivre デモ [ad#ad-2] mLivreの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.mLivre.min.js"></script> HTML img要素をdiv要素で内包します。 <div id="demo1"> <img src="celestin/couverture.jpg" width="650" height="325" /> <img src="celestin/illustration2.jp
Supersized 2.0 Released – Now with Transitions & Controls « Build Internet
This is an outdated version! Supersized has been moved and updated to a more permanent home at the official Supersized project page. Check there for the latest release notes and features! Features of Supersized 2.0 – The Exciting Sequel Since the release of the original Supersized back in February, I have had a fair amount of time to gather feedback, read comments, and plan out what version two wo
20 jQuery Animate Resources for Developers - DJ Designer Lab
Now-a-days jQuery has stolen all the limelight from Flash and all developers like it for unique features of jQuery. jQuery Animate is such a wonderful animation option for developers that they bound to think about opting out Flash. Today we are presenting a wonderful list of tutorials and plugins that can show you some wonderful animations using jQuery. Crafting an Animated Postcard With jQuery Bu
Animated Scroll to Top - Web Designer Wall
Due to a number of requests, I’m writing a detail tutorial on how to create an animated scroll to top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top. View the demo to see it in action. D
[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する
twitter facebook hatena google pocket まずはフォトグラファー 木村 隆宏さんのサイトを御覧ください。 こちらのサイトでは、アクセス時にポートフォリオを順番にフェードさせることで非常に印象的となっています。 今回はこちらで使用しているJavaScriptをのぞきながら、どう実現しているのかを見ていきたいと思います。 sponsors 使用方法 フォトグラファー 木村 隆宏ではJavaScriptライブラリjQueryを利用し、fade.jsでフェードを制御しています。 該当部分を抜粋し、汎用的に書き換えたのが以下となります。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $('
![[チュートリアル]JavaScriptで画像などの要素を順番にフェードさせ表示する](https://cdn-ak-scissors.b.st-hatena.com/image/square/5a2b72034be2bced8bec9088f939fbccfd2280a9/height=288;version=1;width=512/http%3A%2F%2Fwww.skuare.net%2Fassets_c%2F2010%2F07%2Fjintervalfade-thumb-300x200-477.jpg)
RedLine Magazine : jQueryでリストを開閉させたい
jQueryでリストを開閉させたい こちらの記事、サンプルを拝見して。 Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript 英文なのだが、上記ページの「Examples」の部分の各サンプルを見れば何がしたいかはすぐに分かると思う。サイトマップだけでなく、いろんな場所で使えそう。動きも気持ちいいし、是非使ってみたいと思ったのだが、実際使ってみるとダダーと下階層のulリストを開くためには左の「+」マークを的確にポチっとしないといけない。またjs無効の際、下階層のulリストはCSS側で「display:none;」になっているので、そのままでは中身が表示されない。 じゃあそれ、jQueryでやってみよう。 もう少し自分好みな感じにできないかなーということで、jQueryでやってみることにした。対象となるペ
画面いっぱいの背景画像をスライドショウするjQueryプラグイン
2010年4月10日 画面サイズにフィットして伸縮する背景画像を、スライドショウするjQueryプラグインの紹介。 フルFlashサイトなどで見かける、画面サイズに合わせて画面いっぱいに画像が表示されるアレ。それにスライドショウ機能が付いたjQueryプラグインを、自分のサイトで使ってみました。 動作サンプル www.daichifive.com 自分のサイトで使ってみました。なんか、いいカンジでしょ？ちなみに、使用している写真は、足成さんでダウンロードしました。 追記 上記で紹介している僕のサイトのソースコードをまるまる流用する人が増えています。分からないからといって、CSSファイルやデザインまで全部パクるのはやめましょう。head内のアクセス解析用コードまでそのまま使う人が多いのもホント焦る。僕のGoogleAnalyticsの結果に知らないタイトルのページがたくさん入ってきてます。
jQuery 開発者向けメモ - 基本・サンプル
基本 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したインタラクティブなページを作ることが出来ます． 以下のサンプルを見れば，JavaScriptらしい表記をほとんどする必要がないことがわかると思います． toggleサンプル 特定のブロックの表示・非表示を切り替えるのは以下のようなコードになります． $("#target_toggle").toggle("slow"); このブロックは，<p id="target_toggle"> です． Ajaxサンプル Ajaxでhello.htmlをロードするのは以下のようなコ
jQueryを使ったタブメニューの実装サンプルまとめ
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 <head> <!-- jQuery --> <script type="text/javascrip
jQueryでタブメニューを作る（プラグインなし）
twitter facebook hatena google pocket JavaScriptライブラリのjQueryには数多くのプラグインがあり、それを利用することで簡単にリッチなコンテンツを作成できます。 今回はその流れに逆らい、プラグインなしでタブメニューを作成してみたいと思います。 via：Tabbed Structure sponsors 使用方法 まずは、jQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script> $(function(){ $("a.tab").click(function () { //class="tab"のaタグがクリックされたとき $(".active").removeClass("active"); //cla
タブメニューを作ってみよう｜jQuery入門4 « きんくまデザイン
こんばんは、きんくまです。 今回は、イベント処理、アニメーションを説明した後に、タブメニューを作ってみたいと思います。 ⇒今回作成するものはこちら ⇒ソース一式です ■ex1. イベント処理 ロールオーバー／アウトしてclassをつけかえるようにしてみます。 HTML <h3>ex.1 mouseover, mouseout</h3> <div id="ex1"> <div id="mydiv1">mydiv1</div> </div> CSS #mydiv1{ width:100px; height:100px; margin-bottom:40px; border:1px solid #CCC; } #ex1 .over{ background:#0f0; } #ex1 .out{ background:#ff0; } JavaScript function ex1(){ $('#my
jQueryでやる！ブログで使えそうな楽しいナビメニュー45
色々とjQueryのサンプルやプラグインが掲載されていて、眺めてるだけで楽しくなるエントリー。 ナビゲーションメニューで悩んだ時に使えそうです。 45 jQuery Navigation Plugins and Tutorials - Noupe さて、いまや多くの人たちから支持を得ているjQueryで、もっと楽しいブログにしてみるのもいいかもしれない。 jQueryは何もWEBサイトだけのものではありません。条件さえクリアすればブログだって使えるのです。 あなたのブログがほんの少しのjQueryで生まれ変わるかもしれない。 わかる方はさくっと上のリンクを叩いて色々試して見てください。 jQueryってそもそも何、って言う人が居ましたら以下を。 jQueryって、美味しいの？ 結構美味しいです。 多くの方に支持されるにはやはりそれなりの理由があります。 超、簡単に説明すると あなたが書いた
jQueryを使ったクリエイティブなイメージギャラリーいろいろ – creamu
webstandard blogで、jQueryを使ったクリエイティブなイメージギャラリーが紹介されています。 ざっといくつかご紹介。 » Full screen Image-Gallery フルスクリーンのクールなイメージギャラリー » ImageRotator クールにローテーションするギャラリー » Content-Gallery 下にサムネイルを配置したデザイン » Galleriffic シンプルなデザイン » Slider 水平方向にスクロールするクールなギャラリー その他のリストは以下からどうぞ。 » Creative Image-Galleries by jQuery 今日も超天気いーですねーーー。バイクで走りまくり。外苑前→白金→品川イマココ。
spaceforaname.com - このウェブサイトは販売用です！ - Domain hosting リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
認証がかかっています
Loading...
Nothing found for Wordpress 2008 08 %E3%80%90Ajax%E3%80%91Facebox%E3%82%92%E4%Bd%Bf%E3%81%A3%E3%81%A6%E3%81%Bf%E3%82%8B
はじめてのjQuery
http://blog.net-king.com/