jQuery/JavaScript

jQuery/javascript

Web制作のための備忘録
jQuery/javascriptまとめ

2018.10.12

jQueryでタブ切り替えを設置(複数設置も対応)

プラグインを使用せず、jQueryでタブ切り替えを設置する場合は以下のようにすれば簡単に設置が可能。

【HTML】

<ul class="tabMenu">
  <li class="active">タブメニュー</li>
  <li>タブメニュー</li>
  <li>タブメニュー</li>
</ul>
<div class="tabContent active">
  <p>ここにコンテンツ</p>
</div>
<div class="tabContent">
  <p>ここにコンテンツ</p>
</div>
<div class="tabContent">
  <p>ここにコンテンツ</p>
</div>

【jQuery】

$(function () {
  $('.tabContent.active').fadeIn();
  $('.tabMenu li').click(function () {
    var num = $('.tabMenu li').index(this);
    $('.tabContent').removeClass('active').fadeOut();
    $('.tabContent').eq(num).addClass('active').fadeIn();
    $('.tabMenu li').removeClass('active');
    $(this).addClass('active');
  });
});

1ページに複数設置する場合

たまに1ページに複数設置したい場合があるが、上記の記述ではすべてのタブ切り替えが反応してしまうので、別のコードで対応する必要がある。

【jQuery】

$(function () {
  $('.tabContent').hide();
  $('.tabContent.active').show();
  $('.tabMenu li').click(function () {
    var num = $(this).parent().children('li').index(this);
    $(this).parent('.tabMenu').each(function () {
      $('li', this).removeClass('active').eq(num).addClass('active');
    });
    $(this).parents().next().find('.tabContent').removeClass('active').hide().eq(num).addClass('active').show();
  });
});
2018.05.29

JavaScriptで日時を表示する

まずは、現在の日時をDateオブジェクトにより取得

now = new Date(); 

さらに、取得した日時より必要な日時を取り出す

// 年を取得
y = now.getFullYear();
 
// 月を取得(月の取得は0~11の値が取得されるので、1をプラスする)
m = now.getMonth() + 1;
 
// 日を取得
d = now.getDate();

// 曜日を取得
w = [ '日', '月', '火', '水', '木', '金', '土' ][ now.getDate() ];
 
// 時を取得
h = now.getHours();
 
// 分を取得
i = now.getMinutes();
 
// 秒を取得
s = now.getSeconds();

これを利用することで、日付の比較や特定期間の実行などが可能になる。
その他、表示のカスタマイズは以下の通り

//現在時刻をリアルタイムで表示
$(function(){
  setInterval(function(){
    $('#demo1').text(new Date());
  }, 1000);
});

// 1桁を2桁に変換する
m = ('0' + m).slice(-2);
d = ('0' + d).slice(-2);
2018.05.12

JSで画像をロールオーバー(マウスオーバー)させる

CSSのみで画像をロールオーバー(マウスオーバー)させるのはホームページ制作に関わっている人であれば大抵使用しますが、
切り替える画像が多い場合やCSSでコードを書くのが面倒な場合は、JSにてロールオーバーさせるのが効率がいい。

function smartRollover() {
  if (document.getElementsByTagName) {
    var images = document.getElementsByTagName("img");

    for (var i = 0; i < images.length; i++) {
      if (images[i].getAttribute("src").match("_off.")) {
        images[i].onmouseover = function () {
          this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
        }
        images[i].onmouseout = function () {
          this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
        }
      }
    }
  }
}

if (window.addEventListener) {
  window.addEventListener("load", smartRollover, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", smartRollover);
}

使用するには、ロールオーバー前の画像ファイル名を「**_off.jpg」とし、ロールオーバー後の画像ファイル名を「**_on.jpg」とする。
もちろん、画像形式はpngでもgifでもOK

2018.04.19

背景に幾何学的なアニメーションを表示する

以前、本サイトでも使用していたが、幾何学的アニメーションを表示する「particles.js」の設置の仕方。

本体は公式サイトおよびGitHubよりダウンロードする。

ダウンロードした「particles.js」もしくは「particles.min.js」を適当な箇所で読み込み
幾何学的アニメーションを表示するための要素を挿入する。

さらに、画面いっぱいに表示されるようにCSSで設定をする。

#particles-js {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

次は、起動させるための設定を行う。
適当な名前を付けたjsに以下のコードを記述して、先程読み込ませた「particles.js」の次に読み込ませる。

particlesJS('particles-js', {
  "particles": {
    "number": {
      "value": 80, //シェイプの数
      "density": {
        "enable": true,  //シェイプ密集度の可否
        "value_area": 800 //シェイプの密集度
      }
    },
    "color": {
      "value": "#ffffff" //シェイプの色
    },
    "shape": {
      "type": "circle", //シェイプの形(circle:丸、edge:四角、triangle:三角、polygon:多角形、star:星型、image:画像)
      "stroke": {
        "width": 0, //シェイプの線の太さ
        "color": "#000000" //シェイプの線の色
      },
      "polygon": {
        "nb_sides": 5 //多角形の角の数
      },
      "image": {
        "src": "img/github.svg", //imageのパス
        "width": 100, //imageの幅
        "height": 100 //imageの高さ
      }
    },
    "opacity": {
      "value": 0.5, //シェイプの透明度
      "random": false, //シェイプ透明度のランダムの可否
      "anim": {
        "enable": false, //シェイプ透明度のアニメーション可否
        "speed": 1, //アニメーションの速度
        "opacity_min": 0.1, //透明度の最小値
        "sync": false //全てのシェイプを同時にアニメーションさせるか
      }
    },
    "size": {
      "value": 10, //シェイプの大きさ
      "random": true, //シェイプの大きさをランダムにするか
      "anim": {
        "enable": false, //シェイプの大きさをアニメーションさせるか
        "speed": 80, //アニメーションの速度
        "size_min": 0.1, //サイズの最小値
        "sync": false //全てのシェイプを同時にアニメーションさせるか
      }
    },
    "line_linked": {
      "enable": true, //線を表示するか
      "distance": 300, //線をつなぐシェイプの間隔
      "color": "#ffffff", //線の色
      "opacity": 0.4, //線の透明度
      "width": 2 //線の太さ
    },
    "move": {
      "enable": true, //シェイプを動かせるか
      "speed": 12, //シェイプの動くスピード
      "direction": "none", //エリア全体の動き(none、top、top-right、right、bottom-right、bottom、bottom-left、left、top-leftより選択)
      "random": false, //シェイプの動きをランダムにするか
      "straight": false, //個々のシェイプの動きを止めるか
      "out_mode": "out", //bounce:ボックス内で動かす,out:ボックス外に逃がす
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": { //マウスイベント設定
      "onhover": { //マウスオーバー時
        "enable": false, //有効の可否
        "mode": "repulse" //grad:付近のシェイプと線を繋ぐ, bubble:拡大, repulse:拒絶
      },
      "onclick": { //クリック時
        "enable": true, //有効の可否
        "mode": "push" //push:追加, remove:削除, bubble:拡大, repulse:拒絶
      },
      "resize": true //canvasのサイズ変更にわせて拡大縮小するか
    },
    "modes": { //マウスイベント発生時の詳細値を設定
      "grab": {
        "distance": 800, //カーソルからの反応距離
        "line_linked": {
          "opacity": 1 //線の透明度
        }
      },
      "bubble": {
        "distance": 800, //カーソルからの反応距離
        "size": 80, //シェイプの膨らむ大きさ
        "duration": 2, //膨らむシェイプの持続時間
        "opacity": 0.8, //膨らむシェイプの透明度
        "speed": 3 //膨らむシェイプのスピード
      },
      "repulse": {
        "distance": 400, //カーソルからの反応距離
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4 //増えるシェイプの数
      },
      "remove": {
        "particles_nb": 2 //減るシェイプの数
      }
    }
  },
  "retina_detect": true //Retina Displayを対応するか
});
2018.01.30

ページ内、ページ外でスムーススクロールを実装する

ホームページ内にてリンクやボタンをクリックしたときにスクロールする挙動のことをスムーススクロールと言います。
ページ内・ページ外でのスムーススクロール、ヘッダー固定時のスムーススクロールの実装方法は以下の通りです。

ページ内でのスムーススクロール

$(function(){
  $('a[href^=#]').click(function(){
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, 500, "swing");
    return false;
  });
});

ページ外でのスムーススクロール

$(function(){
  $(window).on('load', function() { //ロード後に実行
    var url = $(location).attr('href');
    setTimeout(function(){ //ロード時の処理を待ち、時間差でスクロール実行
      if(url.indexOf("#") !== -1){
        var id = url.split("#");
        var $target = $('#' + id[id.length - 1]);
        if($target.length){
          var position = $target.offset().top;
          $("html, body").animate({scrollTop:position}, 500, "swing");
        }
      }
    },500);
  });
});

ヘッダー固定時のスムーススクロール

$(function(){
  var headerHight = 100; //ヘッダーの高さ
  $('a[href^=#]').click(function(){
    var href= $(this).attr("href");
    var target = $(href === "#" || href === "" ? 'html' : href);
    var position = target.offset().top - headerHight; //ヘッダーの高さ分位置をずらす
    $("html, body").animate({scrollTop:position}, 500, "swing");
    return false;
  });
});

ヘッダー固定時のスムーススクロールは、ヘッダーの高さ分ずれるが生じるのでその分位置をずらします。

2018.01.20

スマホの時だけ、telリンクを有効にする

ホームページを制作する場合、電話番号を記載することがよくありますが、
スマホ表示の場合は電話番号をタップすることで発信させることが出来ます。

//テキストの場合
<p class="tel">012-345-6789</p>
 
//画像の場合は、alt属性に電話番号を入れておく
<p class="tel">
  <img src="tel.png" alt="012-345-6789">
</p>
if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)) {
  $(function() {
    $('.tel').each(function() {
      var str = $(this).html();
      if ($(this).children().is('img')) {
        $(this).html($('<a>').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).append(str + '</a>'));
      } else {
        $(this).html($('<a>').attr('href', 'tel:' + $(this).text().replace(/-/g, '')).append(str + '</a>'));
      }
    });
  });
}

上記のように設定することで、スマホ表示では動的にtelリンクが追加されて以下のようになります。

//テキストの場合
<p class="tel">
  <a href="tel:0123456789">012-345-6789</a>
</p>
 
//画像の場合
<p class="tel">
  <a href="tel:0123456789"><img src="tel.png" alt="012-345-6789"></a>
</p>
2018.01.16

jQueryでスクロールしたら表示されるトップへ戻るボタン

ホームページ制作において、ページをスクロールしていった際にページ上部へ移動したいとき
クリック一つで一気に移動できるボタンは必須とも言えます。

難しいように思えるかもしれませんが、意外と簡単に設置できます。

まずは、head内にjQueryの設置

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

次は、トップに戻るボタンの設置

<div class="pagetop">
  <a href="#">ページトップへ</a>
</div>

最後に、JavaScriptを追加

$(function() {
  var pagetop = $('#pagetop');
  $(window).on('load scroll',function(){
    if($(window).scrollTop() >= 100){ // ボタンの出現位置(100pxスクロールしたら)
      pagetop.fadeIn();
    } else if($(window).scrollTop() < 100){ // ボタンの消える位置(スクロール位置が100px以内になったら)
      pagetop.fadeOut();
    }
  });
  pagetop.on('click',function(){
    $('html,body').animate({ scrollTop : '0' }, 500); // 戻るスピード(数字が小さいほど早い)
  });
});
MAIL制作・お見積りのご依頼
ご相談・お問い合わせ