jQuery 根据浏览器返回不同的顶部和左侧值-6ren

jQuery 根据浏览器返回不同的顶部和左侧值

转载作者：行者123 更新时间：2023-11-28 08:40:07

我用 jQuery 创建了一个动画，附在这个问题上。问题是动画在以下浏览器中看起来与预期不同(见下图):

火狐 49.0
Safari 10.0

我还尝试了其他一些浏览器，动画看起来符合预期(见下图):

Chrome 版本 53.0.2785.143
歌剧 40.0.0.230817323

jQuery 似乎为元素提供了略微不同的位置(M1、M2、..)。如果您查看代码段中的 js 代码，我会在那里计算从起点到例如M1盒子。此信息存储在 pathsFromStartToMachines 数组中。例如，如果我将计算出的航路点记录到 M1 框中，我将根据浏览器获得略有不同的结果。

火狐-[0] 左:140px 上:143px-[1] 左:225px 上:143px
Chrome -[0] 左:140px 上:143px-[1] 左:228px 上:143px

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.machineWidth = Number($('.machine').css('width').replace(/px/, ""));
  $scope.machineHeight = Number($('.machine').css('height').replace(/px/, ""));
  //regex transform string like '343px solid rgb(47,79,79)' into '343'
  $scope.machineBorder = Number($('.machine').css('border').replace(/px\s\w+\s\w+\S\d+\S\s*\d+\S\s*\d+\S/, ""));
  $scope.machineTotalHeight = Number($scope.machineHeight + 2 * $scope.machineBorder);
  $scope.machineTotalWidth = Number($scope.machineWidth + 2 * $scope.machineBorder);

  $scope.middleLineWidth = Number($('#middleLine').css("width").replace(/px/, ""));
  $scope.middleLineTop = Number($('#middleLine').css("top").replace(/px/, ""));
  $scope.middleLineLeft = Number($('#middleLine').css("left").replace(/px/, ""));

  $scope.thicknessHorizontalLine = Number($('.horizontal').css('border-bottom').replace(/px\s\w+\s\w+\S\d+\S\s*\d+\S\s*\d+\S/, ""));

  $scope.palletHeight = 10;
  $scope.palletWidth = 30;

  $scope.startPositionMiddleLine = {
    top: $scope.middleLineTop - $scope.palletHeight,
    left: $scope.middleLineLeft
  };

  $scope.machines = [];
  $('.machine').each(function(index) {
    var id = $(this).attr("id");
    var top = Number($(this).css("top").replace(/px/, ""));
    var left = Number($(this).css("left").replace(/px/, ""));
    $scope.machines.push({
      id: id,
      top: top,
      left: left
    });
  });

  //calculate paths from start to each machine
  var pathsFromStartToMachines = [];
  for (var i = 0; i < $scope.machines.length; i++) {
    var id = $scope.machines[i].id;
    var top = undefined;
    if ($("#" + id).hasClass('first-machine-line')) {
      top = $scope.machines[i].top + $scope.machineTotalHeight;
    } else {
      top = $scope.machines[i].top - $scope.palletHeight;
    }
    var left = $scope.machines[i].left + $scope.machineTotalWidth / 2;


    var waypoints = [];
    waypoints.push($scope.startPositionMiddleLine); //starting point middleLine
    waypoints.push({
      top: $scope.middleLineTop - $scope.palletHeight,
      left: left - $scope.palletWidth / 2
    }); //waypoint on middleLine
    waypoints.push({
      top: top,
      left: left - $scope.palletWidth / 2
    });

    var path = {
      id: id,
      waypoints: waypoints
    };
    pathsFromStartToMachines.push(path)
  }

  $scope.pallets = [];

  $scope.createNewPallet = function(type, position) {
    //generate random unique id
    var id = "pallet" + generateId();
    //check if id is not already in use
    while ($scope.pallets.indexOf(id) !== -1) {
      id = "pallet" + generateId();
    }
    //add pallet to DOM
    $('#mainContainer').append('<div class="pallet" id="' + id + '" style="display:none; top:' + position.top + 'px; left:' + position.left + 'px;"></div>');
    $scope.pallets.push(id);

    //pallet fade in
    $('#' + id).fadeIn("50000");
    return id;
  };

  $scope.movePallet = function(palletId, destinationId) {
    //query path to machine. Notice that $.grep returns an array
    var path = $.grep(pathsFromStartToMachines, function(obj) {
      return obj.id === destinationId;
    });
    for (var i = 0; i < path[0].waypoints.length; i++) {
      var waypoint = path[0].waypoints[i];
      $('#' + palletId).animate({
        left: waypoint.left + 'px',
        top: waypoint.top + 'px'
      }, "slow"); //instead of slow you can use e.g. {duration: 2000}
    }
    $('#' + palletId).fadeOut("slow", function() {
      $('#' + palletId).remove();
    });
  };

  $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m1");
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m5");
  }, 1500);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m2");
  }, 3000);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m4");
  }, 4500);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m3");
  }, 6000);


  function generateId() {
    //generates a random number between 1 and 10000
    return Math.floor((Math.random() * 10000) + 1);
  }
});

#mainContainer > div {
  position: absolute;
}
#mainContainer {
  position: relative;
  width: 700px;
  height: 400px;
  border: 3px solid slategrey;
  background-color: whitesmoke;
}
div.machine {
  width: 60px;
  height: 60px;
  border: 3px solid darkslategray;
  border-radius: 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  background-color: lightslategray;
  color: whitesmoke;
  font-family: Verdana, Helvetica, sans-serif;
}
.first-machine-line {
  top: 10%;
}
.second-machine-line {
  top: 50%;
}
#m1 {
  left: 30%;
}
#m2 {
  left: 50%;
}
#m3 {
  left: 70%;
}
#m4 {
  left: 30%;
}
#m5 {
  left: 50%;
}
.line {
  border: 0;
  background: lightgrey;
}
.horizontal {
  border-bottom: 2px dashed dimgrey;
}
.vertical {
  border-left: 2px dashed dimgrey;
}
#middleLine {
  width: 70%;
  top: calc((50% - 10% - 66px) / 2 + 10% + 66px);
  left: 20%;
}
.vertical-line {
  height: calc((50% - 10% - 66px) / 2);
}
.vertical-line-first-machine-line {
  top: calc(10% + 66px);
}
.vertical-line-second-machine-line {
  top: calc(10% + 66px + (50% - 10% - 66px) / 2);
}
#M1toMiddle {
  left: calc(30% + 66px / 2);
}
#M2toMiddle {
  left: calc(50% + 66px / 2);
}
#M3toMiddle {
  left: calc(70% + 66px / 2);
}
#M4toMiddle {
  left: calc(30% + 66px / 2);
}
#M5toMiddle {
  left: calc(50% + 66px / 2);
}
.pallet {
  width: 30px;
  height: 10px;
  background-color: dimgrey;
  border-radius: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <div id="mainContainer" class="relative">

    <div class="machine first-machine-line" id="m1">M1</div>
    <div class="machine first-machine-line" id="m2">M2</div>
    <div class="machine first-machine-line" id="m3">M3</div>

    <div class="machine second-machine-line" id="m4">M4</div>
    <div class="machine second-machine-line" id="m5">M5</div>

    <div class="line horizontal" id="middleLine"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M1toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M2toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M3toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-second-machine-line" id="M4toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-second-machine-line" id="M5toMiddle"></div>

  </div>
</body>

更新:这是@ConnorsFan 在 safari(版本 10.0)中提供的解决方案的屏幕截图

最佳答案

“机器”div 的边框宽度在 Firefox 中未正确报告。你应该替换:

$scope.machineBorder = Number($('.machine').css('border').replace(/px\s\w+\s\w+\S\d+\S\s*\d+\S\s*\d+\S/, ""));

与

$scope.machineBorder = Number($('.machine').css('borderTopWidth').replace(/px/, ""));

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.machineWidth = Number($('.machine').css('width').replace(/px/, ""));
  $scope.machineHeight = Number($('.machine').css('height').replace(/px/, ""));
  //regex transform string like '343px solid rgb(47,79,79)' into '343'
  $scope.machineBorder = Number($('.machine').css('borderTopWidth').replace(/px/, ""));
  $scope.machineTotalHeight = Number($scope.machineHeight + 2 * $scope.machineBorder);
  $scope.machineTotalWidth = Number($scope.machineWidth + 2 * $scope.machineBorder);

  console.log($scope.machineBorder);
 
  $scope.middleLineWidth = Number($('#middleLine').css("width").replace(/px/, ""));
  $scope.middleLineTop = Number($('#middleLine').css("top").replace(/px/, ""));
  $scope.middleLineLeft = Number($('#middleLine').css("left").replace(/px/, ""));

  $scope.thicknessHorizontalLine = Number($('.horizontal').css('border-bottom').replace(/px\s\w+\s\w+\S\d+\S\s*\d+\S\s*\d+\S/, ""));

  $scope.palletHeight = 10;
  $scope.palletWidth = 30;

  $scope.startPositionMiddleLine = {
    top: $scope.middleLineTop - $scope.palletHeight,
    left: $scope.middleLineLeft
  };

  $scope.machines = [];
  $('.machine').each(function(index) {
    var id = $(this).attr("id");
    var top = Number($(this).css("top").replace(/px/, ""));
    var left = Number($(this).css("left").replace(/px/, ""));
    $scope.machines.push({
      id: id,
      top: top,
      left: left
    });
  });

  //calculate paths from start to each machine
  var pathsFromStartToMachines = [];
  for (var i = 0; i < $scope.machines.length; i++) {
    var id = $scope.machines[i].id;
    var top = undefined;
    if ($("#" + id).hasClass('first-machine-line')) {
      top = $scope.machines[i].top + $scope.machineTotalHeight;
    } else {
      top = $scope.machines[i].top - $scope.palletHeight;
    }
    var left = $scope.machines[i].left + $scope.machineTotalWidth / 2;


    var waypoints = [];
    waypoints.push($scope.startPositionMiddleLine); //starting point middleLine
    waypoints.push({
      top: $scope.middleLineTop - $scope.palletHeight,
      left: left - $scope.palletWidth / 2
    }); //waypoint on middleLine
    waypoints.push({
      top: top,
      left: left - $scope.palletWidth / 2
    });

    var path = {
      id: id,
      waypoints: waypoints
    };
    pathsFromStartToMachines.push(path)
  }

  $scope.pallets = [];

  $scope.createNewPallet = function(type, position) {
    //generate random unique id
    var id = "pallet" + generateId();
    //check if id is not already in use
    while ($scope.pallets.indexOf(id) !== -1) {
      id = "pallet" + generateId();
    }
    //add pallet to DOM
    $('#mainContainer').append('<div class="pallet" id="' + id + '" style="display:none; top:' + position.top + 'px; left:' + position.left + 'px;"></div>');
    $scope.pallets.push(id);

    //pallet fade in
    $('#' + id).fadeIn("50000");
    return id;
  };

  $scope.movePallet = function(palletId, destinationId) {
    //query path to machine. Notice that $.grep returns an array
    var path = $.grep(pathsFromStartToMachines, function(obj) {
      return obj.id === destinationId;
    });
    for (var i = 0; i < path[0].waypoints.length; i++) {
      var waypoint = path[0].waypoints[i];
      $('#' + palletId).animate({
        left: waypoint.left + 'px',
        top: waypoint.top + 'px'
      }, "slow"); //instead of slow you can use e.g. {duration: 2000}
    }
    $('#' + palletId).fadeOut("slow", function() {
      $('#' + palletId).remove();
    });
  };

  $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m1");
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m5");
  }, 1500);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m2");
  }, 3000);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m4");
  }, 4500);
  setTimeout(function() {
    $scope.movePallet($scope.createNewPallet(1, $scope.startPositionMiddleLine), "m3");
  }, 6000);


  function generateId() {
    //generates a random number between 1 and 10000
    return Math.floor((Math.random() * 10000) + 1);
  }
});

#mainContainer > div {
  position: absolute;
}
#mainContainer {
  position: relative;
  width: 700px;
  height: 400px;
  border: 3px solid slategrey;
  background-color: whitesmoke;
}
div.machine {
  width: 60px;
  height: 60px;
  border: 3px solid darkslategray;
  border-radius: 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  background-color: lightslategray;
  color: whitesmoke;
  font-family: Verdana, Helvetica, sans-serif;
}
.first-machine-line {
  top: 10%;
}
.second-machine-line {
  top: 50%;
}
#m1 {
  left: 30%;
}
#m2 {
  left: 50%;
}
#m3 {
  left: 70%;
}
#m4 {
  left: 30%;
}
#m5 {
  left: 50%;
}
.line {
  border: 0;
  background: lightgrey;
}
.horizontal {
  border-bottom: 2px dashed dimgrey;
}
.vertical {
  border-left: 2px dashed dimgrey;
}
#middleLine {
  width: 70%;
  top: calc((50% - 10% - 66px) / 2 + 10% + 66px);
  left: 20%;
}
.vertical-line {
  height: calc((50% - 10% - 66px) / 2);
}
.vertical-line-first-machine-line {
  top: calc(10% + 66px);
}
.vertical-line-second-machine-line {
  top: calc(10% + 66px + (50% - 10% - 66px) / 2);
}
#M1toMiddle {
  left: calc(30% + 66px / 2);
}
#M2toMiddle {
  left: calc(50% + 66px / 2);
}
#M3toMiddle {
  left: calc(70% + 66px / 2);
}
#M4toMiddle {
  left: calc(30% + 66px / 2);
}
#M5toMiddle {
  left: calc(50% + 66px / 2);
}
.pallet {
  width: 30px;
  height: 10px;
  background-color: dimgrey;
  border-radius: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <div id="mainContainer" class="relative">

    <div class="machine first-machine-line" id="m1">M1</div>
    <div class="machine first-machine-line" id="m2">M2</div>
    <div class="machine first-machine-line" id="m3">M3</div>

    <div class="machine second-machine-line" id="m4">M4</div>
    <div class="machine second-machine-line" id="m5">M5</div>

    <div class="line horizontal" id="middleLine"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M1toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M2toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-first-machine-line" id="M3toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-second-machine-line" id="M4toMiddle"></div>
    <div class="line vertical vertical-line vertical-line-second-machine-line" id="M5toMiddle"></div>

  </div>
</body>

在 Safari 中测试时，线条定位不正确，托盘的起始位置位于窗口顶部。通过用 CSS 中的简单值替换 calc(...) 表达式，我获得了预期的布局和行为。结果可见 this jsfiddle .例如这个样式类:

#middleLine {
  width: 70%;
  top: calc((50% - 10% - 66px) / 2 + 10% + 66px);
  left: 20%;
}

替换为:

#middleLine {
  width: 70%;
  top: 38.5%;
  left: 20%;
}

如果需要更精细的计算，另一种方法是计算代码中的值并使用 css jQuery 方法设置位置样式属性。

关于jQuery 根据浏览器返回不同的顶部和左侧值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40081526/

文章推荐： c# - 如何在回发后隐藏 Rad 组合框？

文章推荐： javascript - 上传图像然后检查最大标准然后创建缩略图

css - 左侧、右侧和底部的阴影
我正在使用这段代码: border-right:0px solid #ddd; height:85px; box-shadow :5px 5px 10px 1px #eaeaea; 但我刚刚得到
html - 对齐图像旁边的文本(左侧)
我遇到的问题是将文本放在图像的左侧... HTML 和 CSS h2, social-hand { font-family: 'PT Sans', sans-serif; display: i
css - 文本未对齐居中，左侧
美好的一天我今天的 CSS 很糟糕。我有 3 列 div(水平，这就是我使用 float 的原因)，但我想将我的文本居中对齐，但在包含列 div 的左侧。 HTML:
android - 如何在android中裁剪imageview的顶部、左侧、右侧和底部
在我的应用程序中，我在截取屏幕截图时在我的 Imageview 中获得了透明像素。如何剪切顶部、左侧、右侧和 Imageview 的底部。我尝试了下面的代码但没有工作 Bitmap bitmap =
android - 左侧 LinearLayout 内部的边框
如何在左侧的以下 LinearLayout 内部添加边框，使其宽度为 5dp 并适合 LinearLayout 的整个高度？ LinearLayout 的高度是动态的，这意味着有时它可以是 50dp
html - 左侧 float 的下拉菜单和导航菜单变得模糊
我是第一次做网站。我在使用下拉菜单时遇到问题。它正在向左侧移动。请帮助我处理代码，使其位于导航菜单的正下方，并且将鼠标悬停在其上时应该可见。提前致谢。这是我的 CSS 代码: ul { li
html - 左侧 float 图像
我对 html 和 css 有点生疏，我无法让 2 个图像 float ，一个在另一个之上。这是代码... &nbs
html - 左侧 div 侧边栏动态向下延伸到底部
我有一个固定宽度 (px) 的左侧边栏，右侧是我的主要内容。这是我的演示:http://jsfiddle.net/fxWg7/4031/ 代码如下: 这是我的 html 代码: left co
javascript - 如何缓解 body 左侧？
所以我正在尝试做一个弹出式菜单，但我遇到了一点问题。我已经申请了: .menu-side, .menu { -webkit-transition: left 0.2s ease; -
css - 左侧 float 列表项的总宽度
在下面的 CSS @media screen and (max-width: 750px) { .flexbox { display: block; } .menu ul {
css - 尝试创建网站标题，左侧/顶部有一个小空间不会消失
@import 'https://fonts.googleapis.com/css?family=PT+Sans'; * { font-family: 'PT Sans', sans-serif
html - 将图标放在 H1 左侧
我想在我的标题旁边放一个图标。但它不合适..我怎样才能让它合适？ My heading 最佳答案使用vertical-align:middle，因此如果您更改文本或图像的大小，位
javascript - 以绝对位置居中图像(顶部，左侧)
我正在使用参数方程围绕一个圆定位图像 ( How do I calculate a point on a circle’s circumference? ) 我使用简单的数学方法以更少的方式完成此操作
css - 左侧 float 图像右侧的列表
我想使用外部列表属性将 ul 列表正确定位在左浮动 img 的右侧，但元素符号未在图像右侧对齐，因为没有任何图像，但更多在左边。 Lorem ipsum dolor sit amet, c
android - 以编程方式更改图层列表项目的顶部/右侧/底部/左侧
我有一个layer-list.xml 现在我想在运行时更改 (top,right) 等项目的
emacs - 如何在每次打开 Emacs 时启用行号(左侧)？
我通过按:M-x linum-mode 来启用它们。如何将其“翻译”到 my.emacs 文件中，以便每次打开 EMACS 时自动启用它？最佳答案如果您希望每个缓冲区都使用它，请将 (global
jquery - 无法手动更改可拖动 div 的顶部/左侧？
我的Code : HTML 1 2 3 CSS #score { height:50px; } .myDiv { width:40px; height:40px;
javascript - HTML5 Canvas 设置顶部/左侧
我可以轻松设置 canvas.width 和 canvas.height 属性。我找不到正确的 JavaScript 语法来使用顶部和左侧设置 Canvas 的偏移量。我尝试过直接在 Canvas 上
C# 循环扫描二维数组的顶部、底部、左侧、右侧元素
我正在尝试为我正在编写的单人纸牌游戏完成条件游戏。我把所有的 Action 和棋子都移除了。每一 block 都作为椭圆 UI 元素保存在一个二维数组中，当一 block 被拿走时，它会被替换为边框
android导航 View 菜单项之前(左侧)的空白空间
我正在使用导航 View 修改 Android 应用程序。对于前几个菜单项，我给出了一个图标，但之后，我只给出了菜单标题。但是在导航面板中，没有图标的菜单项有一个空白区域。如何删除空白区域？我希望菜

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jQuery 根据浏览器返回不同的顶部和左侧值