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