jQueryは画像追従効果を実現します

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

成果を達成する

実装する機能:

* マウスが入ると大きな画像が表示されます。
* マウスを外側に動かすと大きな画像が非表示になります。
* 大きな画像内でマウスを動かすと、大きな画像も一緒に移動します。

コード

<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
<title>ここにタイトルを挿入</title>
<スタイル タイプ="text/css">
 体 {
  テキスト配置: 中央;
 }
 ＃小さい {
  上マージン: 150px;
 }
 #showBig{
  位置: 絶対;
  表示: なし;
 }
</スタイル>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
 /*
 * 実装する機能:
 * マウスが入ると大きな画像が表示されます。
 * マウスを外側に動かすと大きな画像が非表示になります。
 * 大きな画像内でマウスを動かすと、大きな画像も一緒に移動します。
  */
 $(関数(){

     /*
     * マウスが入ったり出たりすると、大きな画像を表示または非表示にします*
     */
     //小さい画像にイベントをバインドする$("#small").bind("mouseover mouseout mousemove",function (event) {
            /*
    * マウスを外側に動かすと、大きな画像は消えます。
    ※マウスオーバーすると大きな画像が表示されます。
             */
         if(event.type == "mouseover"){
             $("#showBig").show();
   } そうでない場合 (event.type == "mouseout"){
             $("#showBig").hide();
   } そうでない場合、event.type == "mousemove"){
             console.log(イベント);
                $("#showBig").offset({
                    左: event.pageX + 10、
     上: event.pageY + 10
     /*
     * 本来、マウスは大きな画像の左上隅にありますが、問題が発生します。マウスが小さな画像の左上隅から右下隅に移動すると、マウスはまず大きな画像の領域を離れ、マウスアウトと判断されるため、大きな画像を非表示にする必要があります。
     ※後日、下の領域が実は小さい画像領域だったことが判明し、ノーズオーバーと判断され、再び大きい画像が表示されました。
     * ----> ページが急速に切り替わる原因になります* ==> 解決策: マウスを大きな画像の左上隅から一定の距離を置いて、大きな画像の外側に置きます。
     * マウスが小さい絵の左上隅から右下隅に移動すると、上記の状況は回避されます。 * マウスが小さい絵の範囲内にある限り、マウスが次の瞬間に到達する小さい絵を大きい絵が遮らないためです。 */
    });
   }

        });

 });
</スクリプト>
</head>
<本文>

 <img id="small" src="img/small.jpg" />
 
 <div id="showBig">
  <img src="img/big.jpg">
 </div>

</本文>
</html>

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

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