コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > マウスホバー時の画像拡大効果のjQuery例_jquery

マウスホバー時の画像拡大効果のjQuery例_jquery

WBOY
リリース： 2016-05-16 17:30:15
オリジナル
1498 人が閲覧しました

この効果はもともとシャオ・ミン同志のアイデアから生まれました。私が最初にそれを始めたとき、私はポップアップ画像が固定されており、マウスで移動できないことしか実現できませんでした。ついに、より理想的な効果を実現しました。今日は、このエフェクトを作成する際の私の経験を共有します。まずは最終的なエフェクトのデモを見てみましょう:

マウスホバー時の画像拡大効果のjQuery例_jquery

HTML 構造部分:
まず、a タグ内の img タグを使用して、大きな画像のパスを保存します。

コードをコピー コードは次のとおりです:



CSS スタイルシート部分:
bigimage jQuery を使用します。大きな画像を保存するための p タグの ID を作成し、そのスタイルを絶対配置に設定して、最初に非表示にします。 a タグに黒の背景を追加すると、画像を暗くする効果が得られます。このようにして、簡単なフォトアルバムエフェクトが完成します。

コードをコピー コードは次のとおりです:
ul#gallery { list-style:none ; 幅: 660px; 余白: 10px; 境界線: #fff; }
高さ:200px; float:left ; margin:20px 20px 20px 0; }
ul#gallery li a.smallimage {background:#333; /*画像を暗くするための背景を追加します*/ display:block ; width:200px; height:200px; }
#bigimage {position:absolute; display:none; /* 大きい画像の親ラベルを非表示に設定します*/ } #bigimage img { width:400px; height:400px; pattern:#fff; border:1px; }


最初に 2 つの変数 x を宣言します大きな画像を保存する場合は y と y マウスからの距離。大きい画像を格納するには、ID が bigimage の p タグをボディに追加します。 a タグの rel 属性には、大きい画像のパスが含まれます。小さい画像の上にマウスを置くと、ブラウザ上で取得したマウスの座標が大きい画像の絶対位置の座標に代入され、フェードイン効果を伴って表示されます。その後、mousemove イベントを小さい画像にバインドします。つまり、マウスが移動すると、大きい画像もマウスとともに移動します。次のコードを見てください:



コードをコピーします コードは次のとおりです:




しかし、蘭秋峰同志が述べたように、その効果はまだ完全ではありません。ポップアップされる大きな画像がブラウザの幅を超えると、スクロール バーが表示され、ユーザー エクスペリエンスが非常に悪くなります。週末の時間を利用して、オリジナルをベースに修正を加えました。
最初にアイデアを分析しましょう。デフォルトでは、ブラウザの右端からの現在のマウス ポインタの幅が より小さい場合、ポップアップされる大きな画像の位置は常に現在のマウス ポインタの右側になります。ポップアップされる大きな画像の幅を大きくすると、画像がブラウザからオーバーフローする可能性があります。あとは、現在のマウスポインタのブラウザ右側の枠線からの幅が、大きな画像の幅よりも小さいかどうかを判定するステートメントを記述し、その判定に基づいて表示するだけです。
上記の考えにより、コードをより簡潔にし、再利用性を向上させるために、幅を判断する新しい widthJudge 関数を追加しました:


コードをコピー コードは次のとおりです:

function widthJudge(e){
//ページの合計幅からマウスの現在の X 座標を引いたものが右枠の幅です
var marginRight = document.documentElement.clientWidth - e.pagex; if（marginright＆lt; imagewidth）//変数x
x = imageWidth 22の値を再計算します$("#bigimage").css({top:(e.pageY - y ) 'px',left:(e.pageX - x ) 'px'});
値が表示に十分な場合大きな画像の場合、元の位置に表示されます
$("#bigimage").css({top:(e.pageY - y ) 'px',left:(e.pageX x ) 'px ' });
};
}


最終的に上記のコードと結合された完全な jQuery コード部分は次のようになります。 🎜 >コードをコピー


コードは次のとおりです。


著者別の最新記事
最新の問題
SQL Count() にも 0 が必要です テーブルが 1 つだけあり、0 で始まるタグの各エントリをカウントしたいと考えています。今度はこれを試します: SELECT tag,COUNT(start)ASAnzahl,us...
から 2024-04-06 19:48:53
0
1
449
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
SCSSを使用してデフォルト値とCSS変数を生成する ウェブサイトのスタイリングを実装しています。レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は...
から 2024-04-06 17:46:54
0
1
355
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート