jQuery の写真のサイズ変更効果は、他の要素のレイアウトには影響しません_jquery

以前、このような特殊効果をインターネットで見たことがありましたが、残念ながらその時はURLを保存していなかったので、どのようにしてこの特殊効果が実現されたのか分かりませんでした。今日、意図的にインターネットを検索したところ、案の定、見つけました。

私も頑張って次のように書こうとしました:

しかし、それは単に画像を拡大しただけであり、画像の周囲の要素のレイアウトにも影響を与えました (画像の拡大により、画像はより多くのスペースを占有します）。

後で、overflow 属性とposition 属性を柔軟かつ上手に使用することで目的を達成できることがわかりました。実際、CSS (CSS3) のオーバーフローと位置 (ちなみに上、下、左、右) は、Web ページの特殊効果では単純に解決できない組み合わせだと思います。 もちろん、js (jquery) が主役です。

これほどくだらない話をした後でも、誰もがまだ混乱しているはずです。これはどのような特殊効果ですか?残念なことに、私の言語表現能力はまだ非常に平均的です。以下にそれを説明するためにスクリーンショットを撮ります:

これは、Web ページを開いたときの最初の外観です:

マウスが 6 の上にあるとき 画像のいずれかをクリックすると、前述した特殊効果が表示されます (ここでは例として 3 番目の画像にマウスを置きます):

画像が縮小され、マウスを置くと画像が開くと、画像がオーバーフローする現象はなく、再び拡大された（初期状態に戻った）ように感じられ、他のレイアウトには影響しません。写真と要素。

コードは以下に掲載されています:

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

< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<-- スタイル -->

javascript" src="js /jquery.min.js">

pic">



< div class="pic">

href="#">

pic">