デイトラweb制作中級編 DAY6
nakano
jQueryのアニメーションを実装（課題）２日目
デイトラ簡易サイト（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というツールを手に入れたので
積極的に使ってコーディングの時間短縮を図りたいと思います！
