-1

如何在 mm 而不是 px 中 .postion jquery

$("#status_div").text("Offset Left:"+ui.offset.left.toFixed(0) + " Offset Top:" + ui.offset.top.toFixed(0)
                                        + " Position Left: "+ui.position.left.toFixed(0) +" Position Top: "+ui.position.top.toFixed(0) );
4

2 回答 2

4

为了获得以毫米而不是像素为单位的位置，您必须做的第一件事是找出用户显示器（每个维度）中有多少像素/毫米。您可以通过创建一个元素，将其绝对定位在 中mm，然后从中获取其位置offset（这将以像素为单位提供给您）来做到这一点。例如：

var div = $("<div>").css({
    position: "absolute",
    left: "100mm",
    top: "100mm"
}).appendTo(document.body);
var pos = div.offset();
div.remove();
var pixelsPerMM = {
    x: pos.left / 100,
    y: pos.top  / 100
};

实例| 直播源

然后你可以使用offset（或者position如果你想要相对于父定位元素的数字）并进行数学运算。

于 2013-09-23T05:28:06.373 回答
0

EXTEND jQuery 的位置函数，我用它的 jQuery 自己的代码并将 px 添加到 mm 乘数

解释 ：-

  • 扩展 jQuery 的 Position 方法。
  • 扩展下载http://code.jquery.com/jquery-1.10.2.js。
  • 将行号从行号 9632 复制到 9680 并添加一些更改
  • 1 像素 = 0.264583333 毫米

  • 返回顶部和左侧时，将其乘以 0.264583333

    $(function (){
var docElem = document.documentElement;
jQuery.fn.extend({

position: function() {
    if ( !this[ 0 ] ) {
        return;
    }
    var offsetParent, offset,
        parentOffset = { top: 0, left: 0 },
        elem = this[ 0 ];

    var pxToMmMultiplier = 0.264583333;

    if ( jQuery.css( elem, "position" ) === "fixed" ) {
        // we assume that getBoundingClientRect is available when computed position is fixed
        offset = elem.getBoundingClientRect();
    } else {
        // Get *real* offsetParent
        offsetParent = this.offsetParent();
        // Get correct offsets
        offset = this.offset();
        if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) {
            parentOffset = offsetParent.offset();
        }
        // Add offsetParent borders
        parentOffset.top  += jQuery.css( offsetParent[ 0 ], "borderTopWidth", true );
        parentOffset.left += jQuery.css( offsetParent[ 0 ], "borderLeftWidth", true );
    }
    return {
        top:  (offset.top  - parentOffset.top - jQuery.css( elem, "marginTop", true )) * pxToMmMultiplier,
        left: (offset.left - parentOffset.left - jQuery.css( elem, "marginLeft", true)) * pxToMmMultiplier
    };
},

offsetParent: function() {
    return this.map(function() {
        var offsetParent = this.offsetParent || docElem;
        while ( offsetParent && ( !jQuery.nodeName( offsetParent, "html" ) && jQuery.css( offsetParent, "position") === "static" ) ) {
            offsetParent = offsetParent.offsetParent;
        }
        return offsetParent || docElem;
    });
}
});

    $("#testPos").text(JSON.stringify(($("#testPos").position())));
    $("#testPos2").text(JSON.stringify(($("#testPos2").position())));
});



JSFIDDLE 演示

于 2013-09-23T05:47:39.743 回答