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

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

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

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

マウスホバー時の画像拡大効果の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 コード部分は次のようになります。 🎜 >コードをコピー


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


著者別の最新記事
最新の問題
データベースが正しく実行されていません
から 1970-01-01 08:00:00
0
0
0
テーブルの作成時に日時エラーが報告されます。理由がわかりません。
から 1970-01-01 08:00:00
0
0
0
新标题：合計に対する各グループの平均を計算します
から 1970-01-01 08:00:00
0
0
0
标题重写：クイズのバグにより、正解を複数回押すとスコアが無限に増加します
から 1970-01-01 08:00:00
0
0
0
原标题：この Heroku mysql 接続エラーの原因は何ですか? (フロントエンドからバックエンドの POST リクエストに接続しようとしています)フロントエンドからバックエンドに接続する際の Heroku mysql 接続エラーの原因を特定する
から 1970-01-01 08:00:00
0
0
0
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート