创建缩放效果

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方法。这些工具将简化编写代码的过程，使您的页面按您的要求运行。