Question

在我的应用程序中，我使用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%。

Answer 1

您可以使用以下函数来识别元素在视口中是否完全可见。

 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来决定该元素的不透明度。

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

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

1 个答案: