javascript - 如何使图像上的跨度元素相对于图像大小调整？

Question

我有一个应用程序，我在其中定位办公室布局中的所有员工。我有一个 Office 布局图像，每个员工的 Json 都有一个 x 和 y 坐标来指示员工在布局上的位置。图像放置在面板中，当我调整窗口大小时，图像也会相应地调整大小。但是员工的位置没有调整大小。以下是我的代码:

<div class='col-lg-7 col-md-6 col-sm-12'>
            <div class='row'>
                <div class='col-xs-12'>
                    <div class='panel panel-default'>
                        <div class='panel-body'>
                            <div id="empMap">
                                <img  rel="prefetch" alt="Image is not found" ng-src="{{officeImage}}" id="empMap" style="width: 100%;height: 100%; z-index: -1" onerror="this.src='/img/OfficeImageNotAvailable.png'">
                                <div>
                                    <div ng-repeat="emp in employees">
                                        <span  class="glyphicon glyphicon-oil" id="{{emp.empId}}" ng-click="empDisplay($event)" ng-dblclick="empInfo($event)"
                                              ng-style="{'cursor': 'pointer','color':'green','position': 'absolute',
                                              'left': xValue + emp.location.xcoordinate, 'top': yValue - emp.location.ycoordinate, 'z-index': '2'}"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</div>

Controller 中的代码:

$("#empMap").load(function() {//loading the image of the plant
            img_width = this.width;
            img_height = this.height;
            console.log("getting the values of the images");
            var img_left = $("#empMap").position().left;
            var img_top = $("#empMap").position().top;
            var y = img_height + img_top;
            $scope.xValue = img_left;
            $scope.yValue = y -14;
});

我在上面的代码中所做的是，我根据图像的顶部、左侧高度和宽度值计算 xValue 和 yValue，在我的 html 中，我将 x 和 y 坐标值添加到该值。

我不确定在调整图像大小时如何相应地移动位置。员工的位置也没有正确显示。那么您能否让我知道我在这里缺少什么以及在这种情况下更好的方法是什么。

Answer 1

您的函数仅在页面初始加载时运行，若要在调整浏览器窗口大小时重新计算位置，您需要再次调用该函数。

$( window ).resize(function() {
  Actions Go Here
});

您最好的选择可能是将您的位置计算建立为一个独立的函数，然后从 .load 和 .resize 中调用它，这样您的代码就是 DRY。