jQuery
「Refine Slide」は、14種類ものアニメーションを選択して簡単に実装することができる、レスポンシブ対応のjQueryライブラリです。 ランダムを選択すると、多種多様な動きにしばらく見入ってしまいます。特に「3D Cube horizontal」と「3D Cube vertical」の…
スマホ用画像とPC画像を、スマホ画像のサイズ(640px)を境に切り替えます。 スマホ用画像 01_sp.png 640px×300px PC用画像 01_pc.png 960px×300px スマホ用画像（画面幅は640px） 画像ファイルは、スマホ用の ”01_sp.png” が使用されています。 PC用画像（画…
今後のために、学習に役立つサイトを記述しておきます。 developer.mozilla.orgMozilla Developer Centerの日本語訳サイト。分かりやすいかは別にして、情報量は一番だと思います。 一撃必殺JavaScript日本語リファレンスサンプルが充実しているので理解しや…
jQueryでスムーススクロール ページ内で一気にジャンプしてしまうと、同じページなのか違うページに飛んだのか判断ができません。それを解決する一つの方法でもあるのがスムーススクロールです。 jQueryソース $(function(){ //ページ内リンクにスムーススク…
jQueryでページ先頭にジャンプ jQueryを使用すると簡単にジャンプの機能が実現できます。 ページ先頭に戻るための仕様を以下のように決めます。 最初は上に戻る矢印は消しておく。 ある程度スクロールしたら上に戻るための矢印を表示する。 矢印をクリックし…
スムーススクロール jQueryを使用してページトップまでスムースにスクロールさせます。jQueryプラグインを使うより簡単で軽い処理ですみます。 ソースファイル HTML <p><a id="to-top" href="#top">トップに戻る</a></p> JS <script>$(function(){ $('#to-top').on('click',function(){ $('html,body').anim</script>…
ハンバーガーメニューの動作 ボタンをクリックすると、アニメーション動作で横の3本線から×に変わり、それと同時にボタンの下にスライドダウンでメニューが表示されます。この状態で再度クリックすると、アニメーション動作で元の3本線に戻ります。それと同…
ハンバーガーメニューの動作 プラス（＋）の状態のボタンをクリックすると、アニメーション動作でマイナス（－）になり、それと同時にボタンの下にスライドダウンでメニューが表示されます。マイナス（－）の状態でクリックすると、アニメーション動作でプラ…
HTMLの挿入、クラス属性の追加、スタイルの変更 HTML&CSS <html lang="ja"><head><meta charset="utf-8"><title>jQueryの練習</title><style>p.style { color: #F00; font-size: 36px; background-color: #333;}</style><script src="../js/jquery-2.2.4.min.js"></script><script>$(function(){ $('button').on('click',function(…</meta></head></html>
左のサムネイル画像をクリックすると、クリックした画像が右側に大きく表示されます。 完成画面 ソースコード HTML <html lang="ja"><head><meta charset="utf-8"><title>jQuery</title><link rel="stylesheet" href="css/style.css"><script src="../js/jquery-2.2.4.min.js"></script><script src="js/script.js"></script></head> <body></body></html>
タブパネル ソースファイル HTML <html lang="ja"><head><meta charset="utf-8"><title>jQueryタブパネル</title><link rel="stylesheet" href="css/style.css"><script src="../js/jquery-2.2.4.min.js"></script><script src="js/script.js"></script></head> <body><div id="panel"><h1>ショート・ケーキ</h1><ul class="tab"></ul></div></body></html>
アコーディオンパネルの作成 ソースファイル HTML <html lang="ja"><head><meta charset="utf-8"><title>jQuery</title><link rel="stylesheet" href="css/style.css"><script src="../js/jquery-2.2.4.min.js"></script><script>$(function(){// $('dd').css('display', 'none');// $('dd').hide();// $('dd:first').slideDown(…</link></meta></head></html>
「Lightbox」と「bxslider」プラグイン プラグインのダウンロード Lightboxダウンロード先 lokeshdhakar.com bxsliderダウンロード先 bxslider.com ファイルの階層構造 全体構造 cssフォルダー jsフォルダー imgフォルダー ソースファイル index.html <html lang="ja"><head><meta charset="utf-8"><title>Lightb</title></meta></head></html>…
画像をスライドさせる <html lang="ja"><head><meta charset="utf-8"><title>jQueryアニメーション animate()</title><style>html,body,p { margin: 0; padding: 0;}p { width: 1200px; height: 300px; margin:0 ;}div { width: 400px; height: 300px;/* overflow: hidden;*/}</style></meta></head></html>
フェードインとフェードアウト 表示ボタンを押すと画像を表示（フェードイン）し、非表示ボタンを押すと画像を消す（フェードアウト）プログラム。 <html lang="ja"><head><meta charset="utf-8"><title>jQueryアニメーション</title><style>img { display: none;}</style><script src="../js/jquery-2.2.4.min.js"></script><script>$(function(){ $('button#fadeIn').on('click',functi…</meta></head></html>
jQueryのアニメーション効果 HTML要素のサイズや位置、透明度を時間の経過とともに徐々に変化させ、動いているように見せる。 非表示状態の要素を表示する show() $( セレクタ ).show( スピード ); スピード：slow, fast または ミリ秒(1000=1秒) スピードの…
イベントでタイミングを設定しよう ボタンを押すと画像が替わる処理 <html lang="ja"><head><meta charset="utf-8"><title>jQueryのクリックイベント</title><script src="../js/jquery-2.2.4.min.js"></script><script>$(function(){//$('button').click(function(){ $('button').on('click',function(){ //クリックイベント以外も後で追加できる。スマホ対応にはonを使ったほうが</meta></head></html>…
HTML/CSSを操作するjQueryの命令 <script> $(function(){ $('セレクタ').命令(); }); </script> テキストの変更と取得 text() テキストを変更する text() テキストを取得する HTMLの変更と取得 html() HTMLを変更する html() HTMLを取得する HTMLの挿入 prepend() 指定した要…
readyメソッドについて HTMLの読込みが終わった後に実行させるためのメソッドです。これがないとbody要素内のHTMLよりも先にhead要素内のjQuaryが実行されてしまいます。 readyメソッドの書き方 $(document).ready(function(){ //ここにjQueryの処理を記述 }…
jQueryとは？ JavaScriptを使うより簡単な記述で済むように開発されたJavaScriptのライブラリーのことです。 jQueryを使うメリット 簡潔な短い記述で済む。 ブラウザ間の差異を吸収する。 ネット上に多くの情報が公開されている。 jQueryを使うデメリット サ…
