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 回答