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

デモページ jQuery 様々な処理を短く簡単に書ける jQueryを読み込む → 新規ファイル(colorbox.html)を開き部分に記述 [html] [/html] → jquery.colorbox.jsを読み込む[download id=”3″] [html] [/html] → htmlに記述 [html] [/html] → cssを読み込む[download id=”7″] → imagesをダウンロードしておく[download...

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

デモページ jQuery 様々な処理を短く簡単に書ける jQueryを読み込む → 新規ファイル(slidemoji.html)を開き部分に記述 [html] [/html] → htmlに記述 [html] [/html] → cssを読み込む[download id=”5″] → < body >部分に1枚画像を挿入 → マウスオーバーで表示する文字を記入 → 画像と文字の1セットをdivクラスboxgrid captionfullで囲う※やりたい効果により異なる → 文字部分をdivクラスcover...

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

デモページ jQuery 様々な処理を短く簡単に書ける jQueryを読み込む → 新規ファイル(sort.html)を開き部分に記述 [html] [/html] → framework.jsを読み込む[download id=”8″] → cssを読み込む[download id=”9″] → < body >部分にリストを記入、仮リンクを貼る ul ID名 filter 1つ目(all)のliクラス名 current 例: [html] All Design...

j-4まとめる

世界を旅するカメラマンさんのサイト jQuery 様々な処理を短く簡単に書ける 先ほどのsort.htmlにcolorboxを追加 → sort.htmlを別名保存(sort++.html) → jquery.colorbox.jsを読み込む[download id=”3″](済) → htmlに記述 [html] [/html] → colorbox.cssを読み込む[download id=”7″](済) → から大きくしたい画像にリンクを貼る → < a...

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,'表示したい文字');" onBlur="ShowFormGuide(this,'表示したい文字');" 1 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: http://www.dynamicdrive.com. //** Available/ usage terms at http://www.dynamicdrive.com (March 30th,...