j-1クリックで画像を大きく-colorbox-

デモページ jQuery 様々な処理を短く簡単に書ける jQueryを読み込む → 新規ファイル(colorbox.html)を開き<head>部分に記述 [html] <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script> [/html] →...

j-2マウスオーバーで画像の上に文字-slidemoji-

デモページ jQuery 様々な処理を短く簡単に書ける jQueryを読み込む → 新規ファイル(slidemoji.html)を開き<head>部分に記述 [html] <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script> [/html] → htmlに記述 [html]...

j-3クリックで画像をグループ分け-framework-

デモページ jQuery 様々な処理を短く簡単に書ける jQueryを読み込む → 新規ファイル(sort.html)を開き<head>部分に記述 [html] <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script> [/html] →...

j-4まとめる

世界を旅するカメラマンさんのサイト jQuery 様々な処理を短く簡単に書ける 先ほどのsort.htmlにcolorboxを追加 → sort.htmlを別名保存(sort++.html) → jquery.colorbox.jsを読み込む[download id=”3″](済) → htmlに記述 [html] <script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to...

j-5モーダルウィンドウ

モーダルウィンドウ クリックすると表示される子ウィンドウ。また、一度開いたダイアログボックスを閉じるまで、他の操作をでき なくする CSS Modal demo ・・・シンプルでクール jsをつかわず、cssのみでできる Pop Easy Demo ・・・ポップでキュート CSS Modal → 新規ファイル(modal.html)を作成 → modal.cssを読み込む[download id=”12″]...

j-7入力フォームが空のときに入力案内を表示

htmlにテキストボックスを挿入 → index.html(新規ファイル)を開く → テキストフィールドを挿入・・・挿入→ フォーム→ テキストフィールド → inputタグ内で半角スペース→ value → 表示したい文字をいれ、JavaScript部分をinputタグ内に書き込む onFocus=”HideFormGuide(this,’表示したい文字’);”...

j-9動きのあるアコーディオン

htmlでリストデザインしておく。全体のul クラスは accordion 親リストタイトルは段落とspanで囲む ↓ リストデザインはcss等で完成させておく ↓ jqwery本体読み込み ↓ jsの読み込み <script> $(‘.accordion p’).click(function() { $(‘.accordion p’).removeClass(“selected”).next().slideUp();...

j-8ある程度スクロールしたら現れる「上へ」ボタン

→長めに作成したhtmlファイルを開く scrolltopcontrol.jsをダウンロードを実装 →「上へ」の画像を用意しておく →新規jsファイルを作成 内容は下記 //** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: www.dynamicdrive.com…. //** Available/ usage terms at www.dynamicdrive.com… (March 30th,...