ホームページ > 記事 > ウェブフロントエンド > マウスホバー時の画像拡大効果のjQuery例_jquery
マウスホバー時の画像拡大効果のjQuery例_jquery
- WBOYオリジナル
- 2016-05-16 17:30:151421ブラウズ
この効果はもともとシャオ・ミン同志のアイデアから生まれました。私が最初にそれを始めたとき、私はポップアップ画像が固定されており、マウスで移動できないことしか実現できませんでした。ついに、より理想的な効果を実現しました。今日は、このエフェクトを作成する際の私の経験を共有します。まずは最終的なエフェクトのデモを見てみましょう:
HTML 構造部分:
まず、a タグ内の img タグを使用して、大きな画像のパスを保存します。
コードをコピー コードは次のとおりです:
🎜> 
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 イベントを小さい画像にバインドします。つまり、マウスが移動すると、大きい画像もマウスとともに移動します。次のコードを見てください:
高さ: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 関数を追加しました:
しかし、蘭秋峰同志が述べたように、その効果はまだ完全ではありません。ポップアップされる大きな画像がブラウザの幅を超えると、スクロール バーが表示され、ユーザー エクスペリエンスが非常に悪くなります。週末の時間を利用して、オリジナルをベースに修正を加えました。
上記の考えにより、コードをより簡潔にし、再利用性を向上させるために、幅を判断する新しい 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 コード部分は次のようになります。 🎜 >コードをコピー
コードは次のとおりです。
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 コード部分は次のようになります。 🎜 >コードをコピー
コードは次のとおりです。