jQuery调整旋转元素的大小

eiee3dmh  于 2023-05-17  发布在  jQuery
关注(0)|答案(2)|浏览(165)

我一直在寻找这个问题,但还没有真正找到一个明确的解决方案或例子来解决它。使用jQuery,当我旋转一个resizable时,句柄和随后的调整大小操作都被搞砸了。我如何解决或解决这个问题?这里有一个我正在谈论的例子:http://jsfiddle.net/LVU7c/
小提琴中的代码是:

$('#widget').resizable({ handles: 'n, e, s, w' });

和CSS来旋转一个简单的div标签90度。

v440hwme

v440hwme1#

这个基本概念是由Linus Gudn Jokela发布的,他删除了他的答案,尽管我要求,他也没有恢复。
您可以为内容使用旋转的内部 Package ,然后将大小调整手柄附加到外部元素,外部元素保持不旋转。
就高度和宽度而言,需要一些JS代码来保持内容与容器同步。下面是一个完整的演示:http://jsfiddle.net/fXthv/

JS:

$('#widget').resizable({
    handles: 'n, e, s, w',
    resize: function(){
        correct(this);
    }
});

function correct(el) {
    var widget = $('#widget_content'),
        deg = widget.data("rotate");
    if (typeof deg == "number") {
        widget.css({
            width: (function () {
                if (deg % 180 == 0) return $(el).outerWidth()
                else return $(el).outerHeight()
            })(),
            height: (function () {
                if (deg % 180 == 0) return $(el).outerHeight()
                else return $(el).outerWidth()
            })(),
            marginLeft: (function () {
                if (deg % 360 == 90) return $(el).outerWidth();
                else if (deg % 360 == 180) return $(el).outerWidth();
                else return 0;
                //else if (deg % 360 == 270) return $(el).outerWidth();
            })(),
            marginTop: (function () {
                if (deg % 360 == 270) return $(el).outerHeight();
                else if (deg % 360 == 180) return $(el).outerHeight();
                else return 0;
                //else if (deg % 360 == 270) return $(el).outerWidth();
            })()
        });
    }
}

CSS:

#widget {
    width: 100px;
    height: 100px;
    background-color: #cecece;
}
#widget_content {
    margin-left:100px;
    width: 100px;
    height: 100px;
    background-image: url(http://aux.iconpedia.net/uploads/2106003206.png);
    background-size: 100% 100%;
    /* removing the styles below will make the image appear as expected */
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    /* IE 9 */
    -moz-transform:rotate(90deg);
    /* Firefox */
    -webkit-transform:rotate(90deg);
    /* Safari and Chrome */
    -o-transform:rotate(90deg);
    /* Opera */
}

HTML:

<div id="widget">
    <div id="widget_content"></div>
</div>
avwztpqn

avwztpqn2#

试试这个:)它对我很有效,除了你需要在你的小部件中定位内容。
http://tinyurl.com/jsfiddleee

相关问题