javascript - mm jquery中的.postion

Question

如何在 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) );

Answer 1

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

Answer 2

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 演示