デイトラweb制作中級編 DAY6

jQueryのアニメーションを実装(課題)2日目

デイトラ簡易サイト(web制作初級編 DAY7)をベースにして

課題③モーダルで画像の拡大表示

をjQueryを使って実装する


※注意点

・jQueryライブラリの利用は×

・自分でwebサイトを調べてサンプルコードを実装するのは○

課題③モーダルで画像の拡大表示

完成したモーダルを使った画像の拡大表示

追加したコード ↓

<section class="course section">
   <!-- 「course-item」classを「a」タグで囲む -->
</section>

<div class="modal">
   <!-- 「src」は空欄 -->
   <div class="bigimg"><img src="" alt=""></div>
   <p class="close-btn"><a href="">✖</a></p>
</div>

<script>
$(function () {
   $('.course-item a').click(function () {
      // 「attr」で「src」を取得
      var imgSrc = $(this).children().attr('src');
      // 「attr」で「src」に「imgSrc」を追加
      $('.bigimg').children().attr('src', imgSrc);
      $('.modal').fadeIn();
      return false
   });
   $('.close-btn,.modal').click(function () {
      $('.modal').fadeOut();
      return false
      });
   });
</script>
.course-item a:hover {
   opacity: 0.8;
}

.course-item a img {
   width: 100%;
}

.modal {
   /*ブラウザ画面を基準位置*/
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   /*黒色を透明に*/
   background-color: rgba(0, 0, 0, 0.8);
   display: none;
}

.bigimg {
   /*「fixed」を基準に*/
   position: absolute;
   width: 70%;
   max-width: 800px;
   top: 100px;
   left: 0;
   right: 0;
   margin-right: auto;
   margin-left: auto;
}

.close-btn {
   color: #fff;
   font-size: 40px;
   /*「fixed」を基準に*/
   position: absolute;
   right: 20px;
   top: 0;
}

.close-btn a {
   color: #fff;
   text-decoration: none;
}

attrメソッド

$(' セレクタ ').attr( ' 属性 ', ' ' );

attrメソッド ・・・ HTML 要素の様々な属性の値を取得や変更ができるメソッド

例: $(' h1 ').attr( ' id ', ' my_title ' );

→ 実行すると、<h1 id = my_title>に変更される

勉強するときの注意点

調べれば簡単に実装できるコードを、時間をかけて自作する行為は ×

何をやっているかが理解できるカスタマイズできる程度の知識

が重要で使えるコードは再利用する


→ Boostnote ・・・ 一度書いたコードをメモして使い回せる!

アニメーション実装の引き出しを増やす方法

  • ググって出てきたコードをマネする
  • 良いサイトを見つけたらデベロッパーモードでソースコードを読む
  • テンプレートを購入し、ソースコードを読む
  • CodePenなどで検索したコードをマネする

まとめ

今回もjQueryのアニメーションを実装しました。

モーダルを使った画像の拡大表示もメジャーなおかげで、

検索したらすぐに出ました。

コードがどのような意味を持つのかを調べながらにはなるのですが、

せっかくBoostnoteというツールを手に入れたので

積極的に使ってコーディングの時間短縮を図りたいと思います!

コメントを残す

メールアドレスが公開されることはありません。