マウスホバー時の画像拡大効果のjQuery例_jquery-jsチュートリアル-php.cn

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

マウスホバー時の画像拡大効果の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 関数を追加しました:

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

人気のチュートリアル

詳細>