最近、jQueryを使ったちょっとした仕事をしたのでご紹介します。
いわゆるWebサイトトップページによくある、動きのあるメインイメージです。
以前はFlashを使うのが当たり前でしたが、最近はJavaScriptになってきましたね。
実際に納品したものはお見せできないので、サンプルを作ってみました。
フロントエンドはあまり得意ではないのですが、制作時間は正味3時間程度です。
Main Image Animation – 深夜開発 JS Sample
参考までに一式ダウンロードできるようにしてあります。
gitリポジトリは こちら です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
/** * main_image_anime.js * * JavaScript with jQuery for main image animation. * * @package js-samples * @author Tsukasa Koizumi <tsukasa@koiz.me> * @copyright 2012 Tsukasa Koizumi * */ // jQuery onload $(function(){ /** * mainImageAnimation() * mainImageAnimationクロージャー */ var mainImageAnimation = function() { // class="mainImage"の要素リスト var mainImages = $(".mainImage"); // class="menuBox"の要素リスト var menuBoxes = $(".menuBox"); // class="menuBorders"の要素リスト var menuBorders = $(".menuBorder"); // 現在表示しているイメージの配列インデクス var currentIdx = 0; // 現在ハイライトしているメニューの配列インデックス var currentMenuIdx = 0; /** * getNextIdx() * 次に表示するイメージの配列インデックスを取得 * */ getNextIdx = function() { return currentIdx == (mainImages.length - 1) ? 0 : currentIdx + 1; } /** * getMenuIdx() * マウスオーバーまたはクリックされたメニューの配列インデックスを取得 */ getMenuIdx = function(obj) { for (var i = 0; i < menuBoxes.length; i++) { if (obj == menuBoxes[i] || obj == menuBorders[i]) { return i; } } } /** * fadeOutBorder() * メニューの枠線をフェードアウトする */ fadeOutBorder = function(idx) { $(menuBorders).each( function() { if ($(this).css("display") != "none" && this != menuBorders[idx]) { $(this).fadeOut("fast"); } } ); } /** * rotateMainImage() * メインイメージのローテーション */ rotateMainImage = function() { $(mainImages[currentIdx]).fadeOut("slow"); var nextIdx = getNextIdx(); $(mainImages[nextIdx]).fadeIn("slow"); fadeOutBorder(nextIdx); $(menuBorders[nextIdx]).fadeIn("fast"); currentIdx = nextIdx; currentMenuIdx = nextIdx; } /** * startRotation() * ローテーション開始 */ startRotation = function() { return setInterval("rotateMainImage()", 5000); } /** * メニューのマウスオーバーイベント */ $(".menubox").mouseover( function () { var idx = getMenuIdx(this); fadeOutBorder(idx); if ($(menuBorders[idx]).css("display") == "none") { $(menuBorders[idx]).fadeIn("fast"); } currentMenuIdx = idx; } ); /** * メニューのクリックイベント */ $(".menuborder").click( function () { var idx = getMenuIdx(this); if (currentIdx != idx) { $(mainImages[currentIdx]).fadeOut("slow"); $(mainImages[idx]).fadeIn("slow"); $(menuBorders[idx]).fadeIn("fast"); currentIdx = idx; currentMenuIdx = idx; clearInterval(rotationId); rotationId = startRotation(); } } ); // ローテーション開始 var rotationId = startRotation(); } /** * mainImageAnimation() * 実行 */ mainImageAnimation(); }); |