html - 使用ng-repeat更改可见项的图像不透明度的图像列表

在我的应用程序中，我使用ng-repeat显示一个包含图像的列表。

+---------------------------------------------+
|   |           Previous Image 0         |    |
|   +------------------------------------+    |
|   +------------------------------------+    |
|   |                                    |    |
|   |            Current Image 1         |    |
|   |                                    |    |
|   +------------------------------------+    |
|   +----------------------------------- +    |
|   |             Next Image 2           |    |
+---------------------------------------------+

显示此列表的代码如下：

<div ng-repeat="item in myImageArray">
   <img ng-src="{{item.url}}" id="image{{item.id}}">
</div>

我要实现的目标：
在列表中，我要将Previous Image 0和Next Image 2的不透明度设置为50%。
并且Current Image 1到100%的不透明度。

基本上，可见图像的透明度应为100%，其余图像的透明度应为50%。

最佳答案

您可以使用以下功能来确定元素在视口中是否完全可见。

 function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

在此基础上，您可以编写一些指令来确定您正在查看的是当前元素，并可以使用ng-style或ng-class来确定该元素的不透明度。

我知道这不是一个简单的解决方案，但是我认为这是一种获取视口中当前元素的方法。

关于html - 使用ng-repeat更改可见项的图像不透明度的图像列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37834766/