3

画像を移動して同じ画面でdivを入力し、移動中に画像をテキストで折り返すことができるようにしたいと思います。これまでのところ、私はこれを行うことができました：

http://jsfiddle.net/uk6DA/

ただし、画像を移動しても、テキストの位置は変わりません。画像が移動すると、テキストはどのように再調整されますか？

4

3 に答える 3

1

これはすべて、DOM内の配置に関係していると思います。

このようなことを真剣に考えているのであれば、要素を移動するときに要素がどこにあるかを見つけて、それに基づいてDOM内の場所を変更する必要があると思います。おそらく、テキストも要素に入れたいと思うでしょう。

したがって、最初は#typer、テキストの前にあります。しかし、それを動かすとき、あなたはいくつかのことをしなければならないでしょう。の左端と上端がどこにある#typerか、そしてそれらがどのテキストの上にあるかを確認する必要があります。次に、そこからDOM内でそれらを変更するための計算を行う必要があります。

テキストを適切に再作成して要素に合わせるには、テキストに「span」または「」の束を追加する必要があると思います。div長さが固定されておらず、動的であるため、これも少し難しくなります。divまたはの中にテキストがある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タグで囲む必要があります。そして明らかに、これはテキストを大幅に増やします。

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

これはあなたが必要とするものの最良の例です。

そして、私はこれがどのように機能するのかわかりません..しかし、あなたもこれを見たいかもしれません

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

幸運を祈ります。

于 2012-08-09T16:20:41.567 に答える
0

「サイズ変更された」imgdivをその中のテキストと一緒に操作してみましたか？

あなたは浮かぶことができます：左; imgと右のテキスト。小さくなりすぎないように、最小幅を配置します。

于 2012-08-09T14:05:08.140 に答える