この記事では、画像フォロー効果を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Centos7.X Linux システムに tomcat8 をインストールするためのグラフィック チュートリアル
>>: MySQL ストアド プロシージャで if ステートメントを使用する詳細な例
ドラッグ機能は主に、ドラッグによる並べ替え、ポップアップ ボックスのドラッグと移動など、ユーザーがカ...
1. 文法 場所 [=|~|~*|^~|@] /uri/ { ... } 2. 説明上記の構文から、...
フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...
目次1. 共同インデックスの説明2. ac はインデックスを使用できますか? 3. 考える4. 最左...
序文この記事では、docker-compose と dockerfile を使用して、binlog ...
ハロウィーンではありませんが、Linux の不気味な側面に注目する価値はあります。幽霊、魔女、ゾンビ...
目次必要:発生した問題:解決する:必要:要素テーブル内の複数の列を並べ替えるには、日付の並べ替えをク...
これは、Web ページを Windows のスタート メニューなどのデスクトップ プログラムのように...
目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...
元のアドレス: https://blog.csdn.net/m0_46579864/article/...
目次Dockerコンテナのソースコードを使用してhttpdをデプロイし、ストレージボリュームを使用し...
概要オンラインサービスへのアクセス中に 500 または 502 エラーが発生した場合、緊急処理とトラ...
目次概要1. アプリケーションレベルのミドルウェア2. 組み込みミドルウェア3. サードパーティミド...
公式ドキュメント:したがって、mysql は次のように起動する必要があります。 docker run...
crontab コマンドは、Unix および Linux で定期的な実行命令を設定するために使用され...