.postion in mm jquery

.postion in mm jquery

本文关键字：jquery mm in postion      更新时间：2023-09-26

how to .postion of jquery in mm 而不是 tham px

$("#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) );

为了以毫米而不是像素为单位获得位置，您要做的第一件事是找出用户显示器中（在每个维度上）有多少像素/毫米。您可以通过创建一个元素，将其绝对定位在 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）并进行数学运算。

EXTEND jQuery

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

解释：-

  • 扩展 jQuery 的 Position 方法。
  • 扩展下载 http://code.jquery.com/jquery-1.10.2.js。
  • 将行号 9632 中的行代码复制到 9680 并添加一些更改
  • 1 px = 0.264583333 mm

  • 返回顶部和左侧时将其乘以 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 演示

相关文章：