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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQuery を使用してマウス追従画像を実装する例
  • jQueryは磁気画像追従効果の完全な例を実現します

<<:  Centos7.X Linux システムに tomcat8 をインストールするためのグラフィック チュートリアル

>>:  MySQL ストアド プロシージャで if ステートメントを使用する詳細な例

推薦する

jsドラッグ効果の原理と実装

ドラッグ機能は主に、ドラッグによる並べ替え、ポップアップ ボックスのドラッグと移動など、ユーザーがカ...

Nginx ロケーションマッチングルールの例

1. 文法 場所 [=|~|~*|^~|@] /uri/ { ... } 2. 説明上記の構文から、...

CSS3は水平方向の中央揃え、垂直方向の中央揃え、水平方向と垂直方向の中央揃えのサンプルコードを実装しています。

フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...

MySQLデータベースインデックスの左端一致原則

目次1. 共同インデックスの説明2. ac はインデックスを使用できますか? 3. 考える4. 最左...

DockerでMySQLマスタースレーブ環境を構築する方法の詳しい説明

序文この記事では、docker-compose と dockerfile を使用して、binlog ...

怖いハロウィーン Linux コマンド

ハロウィーンではありませんが、Linux の不気味な側面に注目する価値はあります。幽霊、魔女、ゾンビ...

要素テーブルテーブルコンポーネントの複数フィールド(複数列)ソート方法

目次必要:発生した問題:解決する:必要:要素テーブル内の複数の列を並べ替えるには、日付の並べ替えをク...

CSS マルチレベルメニュー実装コード

これは、Web ページを Windows のスタート メニューなどのデスクトップ プログラムのように...

Vue での親子コンポーネント通信と、sync を使用して親子コンポーネント データを同期する

目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...

Docker コンテナ ソース コードのデプロイ httpd ストレージ ボリュームを使用して Web サイトをデプロイする (推奨)

目次Dockerコンテナのソースコードを使用してhttpdをデプロイし、ストレージボリュームを使用し...

PHP+nginx サービス 500 502 エラーのトラブルシューティングのアイデアの詳細な説明

概要オンラインサービスへのアクセス中に 500 または 502 エラーが発生した場合、緊急処理とトラ...

node.jsミドルウェアの種類についての簡単な説明

目次概要1. アプリケーションレベルのミドルウェア2. 組み込みミドルウェア3. サードパーティミド...

dockerがredisを再起動するとmysqlデータが失われる問題を解決する

公式ドキュメント:したがって、mysql は次のように起動する必要があります。 docker run...

Linux のスケジュールタスク Crontab コマンドの使用に関する詳細な説明と概要

crontab コマンドは、Unix および Linux で定期的な実行命令を設定するために使用され...