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

jQueryで、読み込みとリサイズ処理を一緒にと、ロードとリサイズ処理を一緒に書く方法 javascript
この記事は約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です。");
  }
});
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

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

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

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