jQueryで、読み込みとリサイズ処理を一緒にと、ロードとリサイズ処理を一緒に書く方法

jQueryで、読み込みとリサイズ処理を一緒にと、ロードとリサイズ処理を一緒に書く方法
この記事は約3分で読めます。
広告

jQueryでロードとリサイズを一緒に書く方法のご紹介です。

$(function() {
  $(window).on("load resize", function() {
    // ロードとリサイズ時の処理
  });
});

次に読み込み時とリサイズした時に同じ処理を行う方法です。

$(function() {
  size();
  $(window).on("resize", function() {size();});
  function size() {
    // 読み込み時とリサイズ時の処理
  }
});

これを使って、デモを作ってみます。
ウィンドウサイズを変えると数字と色が変わります。

DEMO



ウィンドウの高さや幅を縮めたり大きくしたりすると数や色が変わるよ!

HTML

<div class="demo1">
    <span></span>
    <span></span>
    <span>ウィンドウの高さや幅を縮めたり大きくしたりすると数や色が変わるよ!</span>
</div>

CSS

  .demo1 span {
    font-size: 20px;
    color: #fff;
    text-align: center;
    padding: 8px 24px;
    margin-bottom: 2%;
    border-radius: 6px;
    display: block;
    -webkit-transition: .2s ease-out;
    transition: .2s ease-out;
  }
  .demo1 span:last-child {
    color: #515151;
    font-weight: bold;
  }

jQuery

$(function() {
  // 幅と高さを使いまわせるよう、グローバル変数にしておく
  var width, height, random;
  // 色を配列に格納
  var c = ["#e94d4d", "#4253ed", "#2de48c", "#d5f127", "#ed4285", "#8342ed", "#42c4ed", "#42edd4", "#ed42d2", "#6fed42", "#ed8542"];
  // 色の配列の数を格納
  var c_num = c.length;

  // 読み込み時とリサイズ時に同じ処理をする
  size();
  $(window).on("resize", function() {size();});

  // 処理内容
  function size() {
    width = $(window).width();
    height = $(window).height();
    random = Math.round(Math.random() * c_num);
    $(".demo1 span").eq(0).css({background: c[random]}).text("現在のウィンドウの幅は" + width + "pxです。");
    random = Math.round(Math.random() * c_num);
    $(".demo1 span").eq(1).css({background: c[random]}).text("現在のウィンドウの高さは" + height + "pxです。");
  }
});
エンデ・バタローをフォローする
javascriptjQueryサイト制作

埼玉県北本市に住み始めて2年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました