2

埋め込みオブジェクトのサイズを変更しようとしています。問題は、マウスをオブジェクトの上に置くと、マウスを「制御」して、移動イベントを飲み込むことです。その結果、オブジェクトを含むdivを展開できますが、縮小しようとすると、マウスがオブジェクトの領域に入ると、サイズ変更が停止します。

現在、移動中はオブジェクトを非表示にしています。オブジェクトがマウスをキャプチャするのを防ぐ方法があるのではないかと思います。おそらく、マウスイベントが埋め込みオブジェクトに到達するのを防ぐ別の要素をその上にオーバーレイしますか？

サイズ変更でゴーストを使用しても、埋め込みオブジェクトでは機能しません。

私はこれを機能させることができないように見えるので、賞金を追加します。収集するには、次の手順を実行するだけです。

ページの中央にPDFが埋め込まれたWebページを提供します。PDFはページ全体を占めることはできません。その幅/高さをブラウザウィンドウなどの幅の50％にします。

jQuery 1.2.6を使用して、PDFのすべての側面と隅にサイズ変更を追加します。

PDFを縮小するときは、PDFでマウスをキャプチャして、ドラッグを停止してはなりません。つまり、PDFの端をクリックしてドラッグすると、マウスがPDFの表示ボックスに入ると、サイズ変更操作が続行されます。

これはIE7で機能する必要があります。条件付きCSS（gte ie7などの場合）のハッキングは問題ありません。

うーん...iframeの問題かもしれないと思っています...

    <div style="text-align:center; padding-top:50px;">
    <div id="doc" style="width:384px;height:512px;">
    <iframe id="docFrame" style="width: 100%; height: 100%;"
 src='http://www.ready.gov/america/_downloads/sampleplan.pdf'>
    </iframe></div></div>
    <div id="data"></div>
    <script type="text/javascript">
        $(document).ready(function() {
        var obj = $('#docFrame');
            $('#doc').resizable({handles:'all', resize: function(e, ui) {
                $('#data').html(ui.size.width + 'x' + ui.size.height);
                obj.attr({width: ui.size.width, height: ui.size.height});
            }});
        });
    </script>

これは機能しません。マウスがiframeに迷い込むと、サイズ変更操作が停止します。

いくつかの良い答えがあります。すべてを精査する前にバウンティがなくなった場合は、バウンティを元に戻します（同じ150ポイント）。

4

8 に答える 8

3

XPS Document Viewerの例などをまったく見つけることができませんでしたが、を思い付くことができましたthis working sample。オーバーレイのアイデアは使用していませんが、サイズを変更できるPDFです...

オーバーレイなしでこの作業を行ったのは、wmodeパラメータがに設定されていることを編集transparentすることです。私は詳細にあまり精通していませんが、IE7でうまく機能するようになりました。Firefox、Chrome、Safari、Operaでも動作します。

フレームで動作させるのに深刻な問題を抱えている新しい編集。私が見つけたいくつかの情報はあまり勇気づけられません。でそれを持つことは不可能<object>ですか？または<object>iframeの内部ですか？

于 2009-01-28T02:24:42.340 に答える
1

私はオーバーレイに答えますが、実際のコードを提供します:P

私はこれをオーバーレイではなく「フォロワー」と呼び、jQuery 用の ThreeSixty プラグインで使用されています (提供されている単純なソース コードのようなものです。「フォロワー」div に何が起こっているかを読めば理解できます)。

http://www.mathieusavard.info/threesixty

于 2008-10-07T04:00:28.950 に答える
0

サイズ変更中にiframeを非表示にしますが、これが私にとってうまくいくものです。それはあなたにとって問題ですか？

$(document).ready(function() {
    var obj = $('#docFrame');
    $('#doc').resizable(
    { 
        handles: 'all', 
        resize: function(e, ui) {
            $('#data').html(ui.size.width + 'x' + ui.size.height);
            obj.attr({ width: ui.size.width, height: ui.size.height });
        },
        start: function(e, ui) { $('#docFrame').hide(); },
        stop: function(e, ui) { $('#docFrame').show(); }
    });
});
于 2009-01-30T20:10:09.827 に答える
0

StackOverflow の新しい「最近のアクティビティ」機能のおかげで、コード例を提供するように依頼されました。マイナーなテストのみを行った (IE で PDF をインライン化するコードを取得できないようです。おそらく、インストールしていない PDF プラグインが必要です)。これは機能しない可能性があります。しかし、それは始まりです。

<div style="text-align: center; padding-top: 50px;">
    <div id="doc" style="width: 384px; height: 512px; position: relative;">
        <div id="overlay" style="position: absolute; top: -5px; left: -5px;
            padding: 5px; width: 100%; height: 100%; background: red;
            opacity: 0.5; z-index: 1; display: none;"></div>
        <iframe id="docFrame" style="width: 100%; height: 100%; position: relative; z-index: 0;"
            src='http://www.ready.gov/america/_downloads/sampleplan.pdf'></iframe>
    </div>
</div>
<div id="data"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var obj = $('#docFrame'), overlay = $('#overlay');
        $('#doc').resizable({
            handles: 'all',
            start: function() {
                overlay.show();
            },
            resize: function(e, ui) {
                $('#data').html(ui.size.width + 'x' + ui.size.height);
                obj.attr({
                    width: ui.size.width,
                    height: ui.size.height
                });
            },
            stop: function(e, ui) {
                overlay.hide();
            }
        });
    });
</script>
于 2009-01-31T01:30:17.903 に答える
0

かぶせる。

一言で答えることは禁止されています。この文は動詞ではありません。

于 2008-10-06T19:50:46.970 に答える
0

IE では、setCapture()/releaseCapture() を呼び出すことができます。iframe でうまく機能しました。

Firefox の場合 -- 既に提案されているように、透明なオーバーレイ。

于 2009-01-30T20:26:18.093 に答える
0

おそらくSmartLookは代替手段です。これらのライトボックス スクリプトに似ていますが、pdf などの埋め込みコンテンツ用です。

于 2009-01-29T15:11:17.920 に答える