創建縮放效果

Question

我想將文本放在div中，然後用另一個div中的圖像圍繞文本，然後用更多文本環繞該圖像。我正在考慮將所有的div對齊，然後使用z-index來排列它們，並使用show/hide來顯示每個新的div，甚至可以使用JavaScript來淡入淡出和看起來很漂亮。但是，包含文本的初始div將太長而不能簡單包圍。

有沒有辦法在運行中調整初始div（包含文本）的大小，也許使用onClick？ 它會使演示更加性感。

我真的不介意做一些研究，所以即使沒有一個明顯的方法來做到這一點，如果有人能指出我在正確的方向，我會很興奮。

這是一個草圖。

1. 是初始頁面

2. 被調整大小後的頁面和顯示第二個div（與圖像）

3. 爲最後頁調整大小1和2以及顯示所述第三DIV後（文字）

Answer 1

這聽起來像你想要在你的文字背景中有背景。如果您爲此使用單個圖像文件，則會浪費相當大的帶寬來處理被文本遮擋的圖像部分。您可能想要將圖像分解爲上，下，左和右邊界的四個圖像。

對於3），文本中的圖像中有文本。如果使用HTML，那麼在圖像周圍纏繞文本應該沒有問題。對於圖像中的文本，您需要設置包含文本相對於圖像的div的CSS屬性。

jQuery可能是一個有用的工具來完成你想要的。查看jQuery.css方法以及jQuery.width和jQuery.height方法。這些工具將簡化編寫代碼的過程，使您的頁面按您的要求運行。