1

非常にユニークな (これまでに見たことがない) 私のドキュメントで何かをしたいので、おそらく不可能です。

私が望むのは、ドキュメント内のすべてをオーバーレイする div を用意することです。背景を黒にして、何も表示されないようにすることもできます。2 番目に、黒い背景を共有しないオーバーレイに小さな squire ウィンドウを配置したいと考えています。ただし、このウィンドウがあるコンテンツのみ。ごく一部のみがズームされる「ズーム」プラグインのようなものですが、この場合は特定のコンテンツが表示されます。そのようなものを作成する方法はありますか？

4

2 に答える 2

4

あなたができることの例は次のとおりです（これは最善ではないかもしれませんが、うまくいきます）

HTML

<div id='peakview'></div> <!-- This div is your view window -->
<div id='out'>
    <div class='overlay'></div>
    <div class='overlay'></div>
    <div class='overlay'></div>
    <div class='overlay'></div>
</div>

の<div>内側は、完全なオーバーレイの錯覚を作成する#out位置に応じてサイズ変更されます。#peakviewこれは、簡単なcss微積分で行うことができます。

主に必要なのは、画面上の要素の位置です。

var h = $(this).offset().top;
var l = $(this).offset().left;
var r = ($(window).width() - ($(this).offset().left + $(this).outerWidth()));
//right offset
var b = ($(window).height() - ($(this).offset().top + $(this).outerWidth()));
//bottom offset

私の例では.draggable()、 fromを使用しjQuery UIて div を移動しました。上記の 4 をドラッグしているdiv間、高さと幅を調整して と の間のスペースを埋め#peakviewますdocument border。

最初の div の例

$('.overlay:eq(0)').css({
     top: 0,
     left: 0,
     width: '100%',
     height: h  //the height is always changing depending on the #peakview .offset().top
});

このフィドルでは、詰め物がどのようにdiv動作するかがわかります

于 2013-05-03T08:31:22.690 に答える
2

別のラフスタート：

http://jsfiddle.net/XDrSA/

これには追加の作業が必要ですが、ニーズに合う場合があります。

HTML:

<div id="yourContent" style="width: 300px; margin:100px auto;">
    <input type="button" id="zoom" value="Click to zoom"/>
</div>

<div id="zoomer">
    <div id="window">This is your "window"</div>
    <div id="overlay_top"></div>
    <div id="overlay_left"></div>
    <div id="overlay_right"></div>
    <div id="overlay_bottom"></div>
</div>

CSS:

body {
    margin:0;
    padding:0;
}

#zoomer {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    display: none;
}
#overlay_top {
    height: 20%;
    width: 100%;
    background-color: black;    
    position: absolute;
    top: 0
}

#overlay_right {
    height: 100%;
    width: 20%;
    background-color: black;    
    position: absolute;
    right: 0;
}

#overlay_left {
    height: 100%;
    width: 20%;
    background-color: black;    
    position: absolute;
    left: 0;
}

#overlay_bottom {
    height: 20%;
    width: 100%;
    background-color: black;    
    position: absolute;
    bottom: 0;
}

#window {
    margin: 0 auto;
    height: 100%;
    width: 80%;
    position: absolute;
    background-color: rgba(0,0,0,.5);
}

そしてJavaScriptの一部：

$('#zoom').click(function() {
   $('#zoomer').fadeIn();
});

配置につまずく必要がある場合があり、ウィンドウは固定サイズになります。ただし、ドラッグできません。

于 2013-05-03T08:03:28.450 に答える