2

コラージュ形式 (複数の画像サイズ) で画像のグループを作成しようとしています。

作成されると、それらはすべて Isotope を介して整列します (このように)。

次に、それらが整列したら、ホバー時に他のものを邪魔にならないように移動し(ホバーされた画像のサイズを大きくするためにサイズを変更します)、より多くの情報を表示します。

現在、私は非常に近づいていますが、Isotope スクリプトでは、画像のサイズを変更するのではなく、コンテナーのサイズを変更できます。

要約すると、画像のサイズ変更に困惑しています。

私が探しているものの例。

そして、これが私のこれまでの JSFiddle です。

助けてくれてありがとう!

4

2 に答える 2

1

アニメーションのメイン画像に対応するために他の画像のサイズを変更する限り、同位体はこれをサポートしていないと思います. おそらく、カスタムの jquery アニメーションを作成する必要があります。

ロジックのあるもの:垂直方向にアニメーション化し、画像の上下にあるすべての要素を見つけて、高さを増やしているのと同じピクセル数だけ縮小します次に、水平方向にアニメーション化し、画像の左右にあるすべての要素を見つけて縮小します幅を広げているのと同じ量のピクセルです。

コンテナーのサイズ変更を制限するためにできることの 1 つは、次の行を isotope オプションに追加することです。

resizesContainer : false

お役に立てれば

于 2011-08-04T13:19:38.863 に答える
0

同位体スクリプトについては何も知りませんが、フィドルに表示する画像の数だけがあり、この数が変わらない場合は、次の方法でかなり簡単に解決できます。

1)すべての画像を絶対に配置します。2)異なる.hover()イベントを各画像にバインドします。3)そのホバーイベント内で、他の画像に必要な変更を加えます。

これは明らかにスケーラブルなソリューションではありませんが、変更する必要のあるイメージの数が管理可能で固定されている場合は、問題なく機能します。

于 2011-08-02T15:29:09.300 に答える