实现点击embed标签的pdf的大屏显示效果

最近在项目多了一个业务，本来很简单就是点击图片进行放大显示，前端用的angularjs，所以只需要在img标签上放ng-click事件然后弹出模态框就可以实现。

由于这世上没有甲方满意的需求，所以新的需求又来了，需要支持图片的地方，都必须支持pdf。感觉也没什么太大的变化，在pdf上加一个点击事件就行了。谁知道支持pdf的embed标签不支持点击事件，重要的中间步骤过不去，瞬间进行不下去了。在网上找了很久也没什么可以解决embed的点击事件，最后网上有一个提出了在pdf上加一个透明遮态框，在遮态框上加点击事件，可行，做了一下完美实现。代码如下：

              <div style="width:206.24px;height:100%;padding:10px;float:left;" ng-repeat="let in item2.ImgList track by $index">
                <div style="width:186.24px;height:117.04px; position:absolute;z-index: 9999;background: rgba(0, 0, 0, 0);" ng-click="functions.InspectionImg(let)"></div>
                <embed embed-src="{{let}}" alt="" draggable="false" style="width:186.24px;height:117.04px;pointer-events: none;">
              </div>

上面的一部分代码，后台查了许多图片然后在前台用ng-repeat遍历，每个embed标签上都加一个遮态框。

一波三折，本来业务已经实现，但在图片超过7个会出现滚动条，在移动滚动条后，再点击图片，出现了不匹配现象。

原来遮态框用的定位为absolute，为父类的绝对定位，下面的图片滚动的时候，上面的遮态框没有改变，导致点击上下不匹配。

思考良久，最后觉得需要从滚动条入手，滚动条滚动的时候让位于上方的遮态框同步移动。代码如下：

 var doc = document.getElementById('inspection-img-scroll' + $scope.data.TabList[i].TabId);
            angular.element(doc).bind("scroll", function (e) {
              $scope.scrollImg = 0 - e.currentTarget.scrollLeft;
            });

前台加上left属性，当滚动条往左滑动时，遮态框同步右移，

              <div style="width:206.24px;height:100%;padding:10px;float:left;" ng-repeat="let in item2.ImgList track by $index">
                <div style="width:186.24px;height:117.04px; position:absolute;z-index: 9999;background: rgba(0, 0, 0, 0);left:{{scrollImg + ($index * 186.24) + ($index === 0 ? 25:($index * 20) + 25)}}px" ng-click="functions.InspectionImg(let)"></div>
                <embed embed-src="{{let}}" alt="" draggable="false" style="width:186.24px;height:117.04px;pointer-events: none;">
              </div>

最后终于完美解决！！！

特此记录。