2

画像をオーバーレイするdivがあります。最上位のdivには、インタラクティブに作成されたsvgコンテンツがいくつかあります。下にある画像にはスクロールバーがあります。画像をスクロールすると、それに応じてオーバーレイするdivのコンテンツもスクロールするようになります。つまり、トップdivでインタラクティブに作成されたアイテムは、画像で直接作成されたように動作する必要があります。下にある画像に対して固定された位置にあり、画像がスクロールされるときにスクロールする必要があります。

以下は私が持っているものです：

<div style="overflow: scroll; width: 800px; height: 680px">
          <img style="max-width: 780px; display: block;"
            src="someimage.png" />

        <div style="display: block; max-width: 780px; top:70px; left:0px; border: solid 1px red; position: absolute">This text should scroll when the image behind is scrolled.</div>

    </div>

私はこの振る舞いを達成するためにjqueryまたは他のプラグインを使用することにオープンです。任意の提案をいただければ幸いです。

4

3 に答える 3

0

画像をdivの背景として使用し、画像の上にdivに何かを入力してみませんか

フォローしてみてください

<div style="display: block; max-width: 780px; padding-top:70px; left:0px; border: solid 1px red;  background-image: url(someimage.png); height:1200px;">This text should scroll when the image behind is scrolled.</div>
于 2012-11-12T00:49:17.360 に答える
0

admoghalからの提案に基づいて、私は次のことを試みました。

<div style="width: 900px; height: 600px; overflow-y: scroll; overflow-x: hidden; display: block; position: absolute;">
   <div class="scales" id="holder" style='left: 0px; top: 0px; width: 1200px; height: 1000px; overflow: hidden; display: block; position: relative; max-height: 1000px; max-width: 1200px; background-repeat: no-repeat; background-image: url("someimage.png"); background-size: contain;'>
   </div>
</div>

これはFirefoxで正常に機能しますが、「background-size」はIEでは有効な属性ではないため、http：//louisremi.github.com/jquery.backgroundSize.js/demo/のbackgroundSizeプラグインを使用して機能させる必要がありました。 IEで。ただし、RaphaelJSプラグインを使用し、その画像関数を使用してビューポートに画像を表示することになりました。

于 2012-11-12T22:20:11.150 に答える
0

私が書いているエディターで同じ問題が発生しました。画像を含むoverflow：auto divと、画像に動的に注釈を付けるためのSVGオーバーレイです。これが私のために働いたものです（amdoghalからの背景画像の手がかりが私を正しい方向に向けました-dummy-map.pngは私が注釈を付けている画像です）。

<div id="wme_map" style="height: 800px; border: 1px solid black; padding:0; overflow: auto;">
    <div id="svg-overlay"  style="width: 1920px; height: 1080px; background-image: url(dummy-map.png)">
        <svg width="1920" height="1080">
            <rect x=20 y=20 width=200 height=32 style="stroke:red; fill:none; stroke-width:2;" />
        </svg>
    </div>              
</div>
于 2013-11-27T09:06:10.197 に答える