2

div のコンテンツをズームしたいのですが、ズーム レベルに関係なく、div の位置と高さ/幅を維持したいと考えています。

私はこのフィドルを作りました: http://jsfiddle.net/fD7L7/5/

問題は、ズームイン/ズームアウトしたい div が、多数のドラッグ可能オブジェクトのコンテナーとして機能することです。

ハーフ？

var currZoom = 1;

$(".zoomIn").click(function(){
    currZoom+=0.1;
    $('.board').css(
    {
        'position' : 'absolute',
        'top' : '45px',
        'left' : '20px',
        'height' : $(window).height()-65,
        'width' : $(window).width()-40,
        'zoom' : currZoom
    });
});

$(".zoomOff").click(function()
{
    currZoom=1;
    $(".board").css(
    {
        'position' : 'absolute',
        'top' : '45px',
        'left' : '20px',
        'height' : $(window).height()-65,
        'width' : $(window).width()-40,
        'zoom' : currZoom
    });
});

$(".zoomOut").click(function()
{
    currZoom-=0.1;
    $('.board').css(
    {
        'position' : 'absolute',
        'top' : '45px',
        'left' : '20px',
        'height' : $(window).height()-65,
        'width' : $(window).width()-40,
        'zoom' : currZoom
    });
});
4

1 に答える 1

0

次のようなものを試してください: http://jsfiddle.net/vaFQ9/

<div class='outboard'>
    <div class="board">
        <div class="draggable"></div>
    </div>
</div>

絶対配置のコンテナー div ('.outboard') と、相対的に配置された内部 div ('.board')。コンテナー div のオーバーフロー プロパティ (この例ではスクロール) は、固定サイズのコンテナーの外観を作成し、その内容をズームインおよびズームアウトします。

.outboard
{
    position: absolute;
    top: 45px;
    left: 45px;
    width: 80%;
    height: 80%;
    padding: 0px;
    border: 1px solid black;
    overflow: scroll;
}

.board
{
    background-color: #334433; /* not actually relevant */
}

.outboard 要素は、ページ上の見かけの位置/ブロック プロパティを指定する場所であり、.board 要素は、同じサイズの div として開始します (パディングとマージンをいじって、それらがフラッシュされていることを確認する必要がある場合があります)。から始めます。

私はjsfiddleであなたの元のコードを少し解体しましたが、うまくいけばそれは理にかなっています.

于 2013-02-01T13:34:35.423 に答える