Question

我正在尝试调整尺子的大小。

当处于水平模式时，它会在您调整大小时进行扩展和缩小。
但是在垂直模式下，标尺向左移动的距离越大，向右移动时向右移动。

您可以调整标尺的大小，拖动小红线。

以下是来源的一部分：

ruler.css({
    width: e.pageY -ruler.offset().top
});

完整的来源是：

$.event.add( document, "mousemove", function(e){
e.stopPropagation(e);
if(ruler_resize_active) {
    console.log(".ruler-resize:mousemove");
    console.log(ruler.offset().left);
    console.log(ruler.offset().top);
    if(options.orientation == "vertical") {
            ruler.css({
             width: e.pageY - ruler.offset().top
        });
            }
     }
});

Answer 1

我不知道jQuery，所以我不能告诉你添加修复的最佳方式，但是如果我理解你的问题，你只需要设置一个transform-origin。默认值为居中中心，因此调整大小时中心点会移动。如果将其设置为左上角，它将按预期工作。

作为一个例子，我在你添加到标尺的CSS中为webKit添加了它（使用它的前缀）：

var ruler = $(this)
    .addClass('ruler')
    .css({
        minWidth: options.minWidth,
        maxWidth: options.maxWidth,
        width: options.width,
        webkitTransformOrigin: "top left"
    });

你应该将它设置在你通常在jQuery中设置的正确位置，使用jQuery用来设置transform-origin的任何方法（可能就在你应用rotate或添加一些参数之前）。您还应该添加各种其他前缀和无前缀版本。对于无前缀版本，它应该是transformOrigin（小写t）。

示例：http://jsfiddle.net/Bst6G/3/

尺寸变化时可以div元素固定位置吗？

1 个答案: