jQuery はシャッター効果を実現します (li 配置を使用)

この記事では、ブラインド効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

おそらく次のような考えでしょう:

div (幅 800 ピクセル) には ul と li が含まれています。li の幅と高さはそれぞれ 560 ピクセルと 300 ピクセルに設定されています (li 内の画像の幅と高さも同じです)。 li の絶対位置と div の相対位置を設定します。
.no0{ 左:0; }
.no1{ 左:160px; }
.no2{ 左:320px; }
.no3{ 左:480px; }
.no4{ 左: 640px; }
アニメーション化されていない場合、各 li の幅と高さは 160 ピクセルです。 (800/5=160 div幅/画像数)
アニメーション中、マウスで入力した線の幅と高さはそれぞれ 560px と 300px となり、画像が完全に表示されます。マウスで入力されていない他の画像の幅は（800-560）/ 4 = 160pxです
マウスをボックスの外に出すと、各画像は元の位置に戻ります。

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<スタイル>
    *{
        マージン:0;
        パディング:0;
        オーバーフロー: 非表示;
    }
    。箱{
        幅:800ピクセル;
        高さ:300px;
        border:5px グレー実線;
        マージン:100px 自動;
        位置: 相対的;
    }
    li{
        リストスタイル: なし;
        フロート: 左;
        位置:絶対;
        /*幅:160px;*/
        高さ:300px;
        幅:560ピクセル;
    }
    .no0{ 左:0; }
    .no1{ 左:160px; }
    .no2{ 左:320px; }
    .no3{ 左:480px; }
    .no4{ 左: 640px; }

    画像{
        幅:560ピクセル;
        高さ:300px;
    }

</スタイル>
<本文>
<div class="box">
    <ul>
        <li class="no0"> <img src="img/0.jpg" alt=""> </li>
        <li class="no1"> <img src="img/1.jpg" alt=""> </li>
        <li class="no2"> <img src="img/2.jpg" alt=""> </li>
        <li class="no3"> <img src="img/3.jpg" alt=""> </li>
        <li class="no4"> <img src="img/4.jpg" alt=""> </li>
    </ul>
</div>


<script src="js/jquery-1.12.3.min.js"> </script>
<スクリプト>
    
// 初期位置 0 160 320 480 640
// 左端の位置 0 60 120 180 240
//右端の位置: 0 560 620 680 740
$lis = $("li");
//マウスが図1に入ると、図1から図4が右にアニメーションします $lis.eq(0).mouseenter(function(){
      停止します。
      $lis.eq(1).animate({left:560},1000);
      $lis.eq(2).animate({left:620},1000);
      $lis.eq(3).animate({left:680},1000);
     $lis.eq(4).animate({left:740},1000);
  });
//マウスが画像2に入ると、画像2は左にアニメーションし、画像3から4は右にアニメーションします$lis.eq(1).mouseenter(function(){
    停止します。
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:620},1000);
    $lis.eq(3).animate({left:680},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(2).mouseenter(関数(){
    停止します。
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:680},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(3).mouseenter(関数(){
    停止します。
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:180},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(4).mouseenter(関数(){
    停止します。
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:180},1000);
    $lis.eq(4).animate({left:240},1000);

});


//マウスがボックスから離れると、各画像は元の位置に戻ります$(".box").mouseleave(function(){
        停止します。
        $lis.eq(1).animate({left:160},1000);
        $lis.eq(2).animate({left:320},1000);
        $lis.eq(3).animate({left:480},1000);
        $lis.eq(4).animate({left:640},1000);
    })

</スクリプト>
</本文>
</html>

実行結果:

コードの簡素化:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<スタイル>
    *{
        マージン:0;
        パディング:0;
        オーバーフロー: 非表示;
    }
    。箱{
        幅:800ピクセル;
        高さ:300px;
        border:5px グレー実線;
        マージン:100px 自動;
        位置: 相対的;
    }
    li{
        リストスタイル: なし;
        フロート: 左;
        位置:絶対;
        幅:560ピクセル;
        高さ:300px;
    }
    .no0{ 左:0; }
    .no1{ 左:160px; }
    .no2{ 左:320px; }
    .no3{ 左:480px; }
    .no4{ 左: 640px; }

    画像{
        幅:560ピクセル;
        高さ:300px;
    }

</スタイル>
<本文>
<div class="box">
    <ul>
        <li class="no0"> <img src="img/0.jpg" alt=""> </li>
        <li class="no1"> <img src="img/1.jpg" alt=""> </li>
        <li class="no2"> <img src="img/2.jpg" alt=""> </li>
        <li class="no3"> <img src="img/3.jpg" alt=""> </li>
        <li class="no4"> <img src="img/4.jpg" alt=""> </li>
    </ul>
</div>

<script src="js/jquery-1.12.3.min.js"></script>
<スクリプト>
// 初期位置 0 160 320 480 640
// 左端の位置 0 60 120 180 240
//右端の位置: 0 560 620 680 740


    $lis = $("li");
    $lis.mouseenter(関数(){
        停止します。
        コンソールにログ出力します。
        var インデックス = $(this).index();
// マウスが画像の左側に入ると、左にアニメーションします。右側では、右にアニメーションします $lis.each(function(i){
            if(i <= インデックス){
                $(this).animate({left:60*i},1000);
            }それ以外{
                $(this).animate({left:560+60*(i-1)},1000);
            }
        })
    })

//マウスがボックスから離れると、各画像は元の位置に戻ります$(".box").mouseleave(function(){
    停止します。
      $lis.each(関数(i){
          $(this).animate({left:160*i},1000);
      });

});



</スクリプト>

</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: