マウスオーバー 【マウスオーバー】サムネイル画像のマウスオーバーでメイン画像を表示
サムネイル画像をマウスオーバーするとメイン画像が表示されます。同様にキャプションのテキストも差し代わります。
2019-09
マウスオーバー 
タブメニュー 【タブメニュー】テキストの文字数制限と省略文字の表示
コンテンツのボリュームを制限するため、テキストの文字数を35文字＋省略文字で表示します。35文字以内のテキストは省略文字を使用せずにそのまま表示します。
マウスオーバー 【マウスオーバー】画像・背景画像をマウス操作に合わせて動かすプラグイン【jquery.parallax.js】
画像や背景画像をマウス操作に合わせて動かすことができるプラグイン、jquery.parallax.jsを利用します。移動幅や移動スピードの設定も可能です。
モーダルウィンドウ 【モーダルウィンドウ】プラグインを利用せずjQueryで実装
モーダルウィンドウをプラグインを利用せず、html、CSS、jQueryの記述で実装します。レスポンシブ対応です。モーダルウィンドウは画面中央に表示させ、bodyのスクロールバーは非表示にします。
フェーダー 【フェーダー】テキストが左に流れるニュースティッカー
フェードインでニュースティッカーを表示させ、5秒後にニュースのテキストが左に流れていきます。全てテキストが流れた後に、次のテキストがフェードインで表示されます。
タブメニュー 【タブメニュー】$.ajaxを$.getJSONに書き換え
ajaxのjsonファイル読み込み部分、$.ajaxを$.getJSONに書き換えます。キャッシュの無効化にも対応させます。
ツールチップ 【ツールチップ】クリッカブルマップをマウスオーバーでマウスに追従
日本地図の画像に設定したクリッカブルマップをマウスオーバーすると、マウスに追従するツールチップが表示されます。クリッカブルマップはjQueryプラグインのjquery.rwdImageMaps.jsでレスポンシブ対応しています。
レスポンシブ 【レスポンシブ】クリッカブルマップのレスポンシブ対応【jquery.rwdImageMaps.js】
jQueryプラグインのjquery.rwdImageMaps.jsを利用します。日本地図の画像に設定したクリッカブルマップをレスポンシブに対応させます。
マウスオーバー 【マウスオーバー】画像の右クリック及びドラッグ&ドロップ禁止
クラス名img_dlを付与されていないimgタグの画像は、jQueryで右クリック及びドラッグ&ドロップを無効化します。クラス名img_dlを付与されたimgタグの画像のみ右クリック及びドラッグ&ドロップができます。
タブメニュー 【タブメニュー】タブ内コンテンツから別タブトップへ移動
タブ内のコンテンツにリンクを設定し、リンクをクリックで別タブのトップへスムーススクロールで移動します。