0

タイトルが少し紛らわしいかもしれないことを理解しています（他に質問する方法がわかりません）ので、ここに私が取り組んでいる例を示します。

http://beautifulcreationphotography.net/gallery.html

したがって、私の問題は、画像にカーソルを合わせると、画像が拡大すると他の画像が動き回ることです。考えられる解決策の 1 つは、絶対配置を使用することですが、すべての画像をグリッド内に手動で配置するのは非常に面倒です (3 列幅のグリッドにしたいと考えています)。

これに役立つ他のソリューションは何ですか? 私は、純粋な JavaScript ソリューションと JS ライブラリの使用の両方にオープンです。

HTML: http://pastebin.com/pfuRppdY

JS: http://pastebin.com/9m7TwNXU

CSS:

#gallery {
    display:inline;
    margin:50px;
    height:300px;
}

#gallery img {
    position:relative;
    width:200px;
    margin:30px;
}
4

2 に答える 2

0

単純。各画像に異なる z-index を与えてください! そうすれば、彼らはすべて異なる平面にいます...

JavaScript/DHTML メソッドでこれを行うことができます。配列内の画像に番号を付ける場合、画像をループして、各画像に増加する z インデックスを割り当てるのは簡単です。

于 2012-06-06T02:55:53.343 に答える
0

jQuery などの JavaScript フレームワークの使用を検討したことがありますか?

このサイトをチェックしてみてください: http://codecanyon.net/item/image-effects-pack-jquery-powered/full_screen_preview/136861?ref=lvraa&ref=lvraa&clickthrough_id=60503324&redirect_back=true

ズーム効果までスクロールすると、探しているものが表示されます。

于 2012-06-06T02:21:34.483 に答える