jQuery入門--画像とキャプション

画像とキャプション

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム
JQury CDNを入れる

＜!--jquery--＞リンク先

＜script src="https://code.jquery.com/jquery-3.7.1.min.js"

integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=

" crossorigin="anonymous"＞＜/script＞

 

＜!--jquery UIは拡張型--＞リンク先

＜script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"

integrity="sha256-AlTido85uXPlSyyaZNsjJXeCs07eSv3r43kyCVc8ChI=

" crossorigin="anonymous"＞＜/script＞

 

【ホームページの作成】
ブラウザを立ち上げると、この様に感じになる

【キャプションの動作】
1.蜂鳥にマウスオーバーした時、

　キャプションが表示されて、画面が不透明になる
2.Shrikeにマウスオーバーした時、

　キャプションが左側からスライドしてきて、最後は不透明になる
3.ハチクイ鳥にマウスオーバーした時、
・ファイルとフォルダーの関係

【htmlのコードを書く】

続

・CSSフォルダに「main.css」ファイルを置き、コードを書く

/*

 * Base

 */

html {

    "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

    font-size: 16px;

    line-height: 1.5;

}

body {

    background-color: #656565;

}

img {

    /*テキストの縦軸の位置を指定:行の中央*/

    vertical-align: middle;

}

 

.page-header {

    background-color: #fff;

}

.page-header h1 {

    width: 976px;

    height: 80px;

    margin: 0 auto;

    padding-left: 10px;

    font-size: 20px;

    font-weight: normal;

    line-height: 80px;

    letter-spacing: 0.1em;

}

.page-main {

    position: relative;

}

.page-main > div {

    padding: 50px 0 100px;

}

.page-main > div h2 {

    color: #fff;

    text-align: center;

    margin: 0 0 50px;

    font-weight: normal;

    letter-spacing: 0.15em;

}

 

#images {

    background-color: #ff8873;

}

 

#images .inner{

    position: relative;

    width: 976px;

    margin: 0 auto;

}

 

#images p {

    position: relative;

    width: 580px;

    height: 380px;

    margin: 0 auto 80px;

}

#images p strong {

    color: #fff;

    font-size: 20px;

}

.page-footer {

    background-color: #000000;

}

.page-footer small {

    display: block;

    color: #fff;

    font-size: 18px;

    text-align: right;

    width: 976px;

    margin: 0 auto;

    height: 120px;

    line-height: 120px;

    letter-spacing: 0.15em;

}

.page-footer a {

    color: #fff;
　/*テキストに線や色など*/

    text-decoration: none;

    padding-right: 50px;

}

/*

 * Helpers

 */

/* Clearfix */

.clearfix:before,

.clearfix:after {

    content: " ";

    display: table;

}

.clearfix:after {

    clear: both;

}

/*

 * sample.js用

 */

/* #images */

#images p {
　/*はみ出した要素を削除する*/

    overflow: hidden;

}

/*スペースを使ってセレクタをいくつも書くことで親子関係を表す
*imagesは親で、ｐは子で、strongは孫セレクタとなり、それを設定している

*/

#images p strong {

    position: absolute;

    display: block;

    z-index: 1;

    bottom: 0;

    width: 540px;

    height: 30px;

    background: rgba(0, 0, 0, 0.5);

    text-align: left;

    padding: 20px;

}

#images p span {

    position: absolute;

    display: block;

    z-index: 0;

    top: 0;

    width: 580px;

    height: 380px;
　/*半透明の背景と内側の影、rgba(、、、0.6）は透明度*/

  box-shadow: inset 0 0 50px rgba(50, 30, 0, 0.6),

                inset 0 0 100px rgba(50, 30, 0, 0.3);

    background: rgba(255, 155, 0, 0.2);

    opacity: 0;

}

/*jsからセットされる*/

#images p:nth-child(1) strong {

    opacity: 0;

}

#images p:nth-child(2) strong {

    opacity: 0;
　/*左端から、要素の2倍幅だけ左に動かす*/

    left: -200%;

}

#images p:nth-child(3) strong {
　/*下から、更に80PX下に移動する*/

    bottom: -80px;

    background: rgba(34, 34, 34, 1);

}

#images p:nth-child(3) img {
　/*親要素を基準点にする*/

    position: absolute;

    top: 0px;

}

 

・JSフォルダーに「main.js」ファイルにコードを書く

$(function(){

    //  時間の変数

    var duration = 1000;

    // images ----------------------------------------

    var $images = $('#images p');

     //filterメソッドの基本的な構文-------

     //$(‘要素’).filter(‘nth-child(n)番目の要素')

     // を絞り込むメソッド--------------

    // images 1つ目の画像

    $images.filter(':nth-child(1)')

        .on('mouseover', function(){

            $(this).find('strong, span').stop(true).animate({opacity: 1}, duration);

        })

        .on('mouseout', function(){

            $(this).find('strong, span').stop(true).animate({opacity: 0}, duration);

        });
//この処理により、空白の＜span＞要素が仕様される。find（）メソッドは子孫から、特定の要素を探す。

    // images 2つ目の画像

    $images.filter(':nth-child(2)')

        .on('mouseover', function(){

            $(this).find('strong').stop(true).animate({opacity: 1, left: '0%'}, duration);

            $(this).find('span').stop(true).animate({opacity: 1}, duration);

        })

        .on('mouseout', function(){

            $(this).find('strong').stop(true).animate({opacity: 0, left: '-200%'}, duration);

            $(this).find('span').stop(true).animate({opacity: 0}, duration);

        });

    // images 3つ目の画像

    $images.filter(':nth-child(3)')

        .on('mouseover', function(){

            $(this).find('strong').stop(true).animate({bottom: '0px'}, duration);

            $(this).find('span').stop(true).animate({opacity: 1}, duration);

            $(this).find('img').stop(true).animate({top: '-20px'}, duration * 1.3);

        })

        .on('mouseout', function(){

            $(this).find('strong').stop(true).animate({bottom: '-80px'}, duration);

            $(this).find('span').stop(true).animate({opacity: 0}, duration);

            $(this).find('img').stop(true).animate({top: '0px'}, duration);

        });

});

以上