3

我希望能够移动图像并在同一屏幕上输入 div，并在移动图像时将文本环绕在图像周围。到目前为止，我已经能够做到这一点：

http://jsfiddle.net/uk6DA/

但是当图像移动时，文本不会改变它的位置。移动图像时如何重新调整文本？

4

3 回答 3

1

我认为这一切都与 DOM 中的位置有关。

如果你认真做这样的事情，我认为你将不得不在移动它时找到元素所在的位置，然后根据它在 DOM 中更改它的位置。您可能也希望将文本放入元素中。

所以，一开始，#typer在正文之前。但是当你移动它时，你将不得不做几件事。您必须查看左边缘和上边缘的位置#typer，以及它们位于顶部的文本。然后，您必须进行计算以从那里在 DOM 中修改它们。

我猜你要么必须在文本中添加一堆span's 或div's，以便能够适当地重新创建文本，以适应元素。这也会有点困难，因为长度不是固定的，它们是动态的。使用divor中的文本span，您不会将“环绕”到页面的一侧，它只会下降到该元素中的下一行。

最初设定

在此处输入图像描述

运动后

在此处输入图像描述

这应该解释你将如何将它们分开。它可能会变得相当复杂，但你可以做到。您只需要处理不同类型的测量即可。我过去做过与此非常相似的事情。

基本上，只需跟踪您拆分文本的位置（这就是它们按顺序排列 ID 的原因），这样您就可以加入它们。测量文本占用了多少空间，图像占用了多少空间，以及您可以使用的画布区域有多大。

从那里开始，您应该对要做什么有一个很好的衡量标准。只要确保您的文本在溢出时不会中断到下一行。如果发生这种情况，它将打破并破坏幻觉。

因此，就 DOM 中的位置而言：

最初设定

<div id="typer">
    <img id="img" />
    <div class="text"> ..... </div>
</div>

运动后

<div id="typer">
    <div class="text" id="text1"> ... </div>
    <div class="text" id="text2"> ... </div>
    <div class="text" id="text4"> ... </div>
    <div class="text" id="text6"> ... </div>
    <div class="text" id="text8"> ... </div>
    <img id="img" />
    <div class="text" id="text3"> ... </div>
    <div class="text" id="text5"> ... </div>
    <div class="text" id="text7"> ... </div>
    <div class="text" id="text9"> ... </div>
    <div class="text" id="text10"> ... </div>
</div>

这也将是为 CSS 设置它的“最简单”的路线，除非你position: absolute;一切都可以工作。

于 2012-08-09T14:37:12.350 回答
1

单词没有坐标，因此您必须用 html-tag 包装每个单词。显然这会增加很多文本。

http://meindesign.net/tools/running_text.php

这是您需要的最佳示例。

而且我不知道这是如何工作的..但你可能也想看看这个

http://www.jwf.us/projects/jQSlickWrap/

祝你好运。

于 2012-08-09T16:20:41.567 回答
0

您是否尝试过使用“调整大小”的 img div 以及其中的文本？

你可以浮动：左；img 和正确的文本。放置一个最小宽度以避免它太小。

于 2012-08-09T14:05:08.140 回答