如何仅使用 javascript无 jquery使 html 图像在滚动时淡入淡出？

如何解决如何仅使用 javascript无 jquery使 html 图像在滚动时淡入淡出？

我正在从事一个大学项目，该项目要求我设计一个包含动态 Javascript 内容的网站。本单元专门关于 Javascript；在下一个单元之前不允许使用 Jquery 或其他任何东西。我想要完成的是让图库中的图像在滚动到视口中时滚动。如果图像的任何部分可见，脚本应该开始按比例增加图像滚动的不透明度。我从不同的教程和堆栈中的答案中尝试了一些不同的东西，但没有任何效果。该代码可能有效，但不会在滚动时激活。如果有人可以提供帮助，这是代码：

var elementPosition = window.pageYOffset;
    
function isInViewport(img) {
  var relct = img.getBoundingClientRect();
  
  return rect.bottom > 0 && 
  rect.right > 0 && 
  rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
  rect.top < (window.innerHeight || document.documentElement.clientHeight);
  
}

function fadeIn() {
  var imgList = document.getElementsByTagName("IMG");
  var i;
  for (i = 0; i < imgList.length; i++) {
    var img = imgList[i];
    if (isInViewport(img)) {
      if (elementPosition < 200) {
        opacity = 1 - (elementPosition / 200));
      }
      else {
        opacity = 1;
      }    
    }
    else {
      opacity = 0;
    }
  }
}

window.addEventListener('scroll',fadeIn());

解决方法

您的代码中有很多错别字——我建议您使用一个应用程序，它可以在您编写代码时整理您的代码和/或标记错误（就我个人而言，我使用的是 codepen.io）。此外，不透明度通过以下方式设置：element.style.opacity。

var imgList = document.getElementsByTagName("IMG");

function isInViewport(img) {
  var rect = img.getBoundingClientRect();
  return (
    rect.bottom > 0 &&
    rect.right > 0 &&
    rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
    rect.top < (window.innerHeight || document.documentElement.clientHeight)
  );
}

function fadeIn() {
  for (i = 0; i < imgList.length; i++) {
    if (isInViewport(imgList[i])) {
      imgList[i].style.opacity = 1;
    }
  }
}
window.addEventListener("scroll",fadeIn);

img {display: block; transition: all 1s; opacity: 0;}

<img src="http://www.fillmurray.com/300/600">
<img src="http://www.fillmurray.com/300/600">
<img src="http://www.fillmurray.com/300/600">
<img src="http://www.fillmurray.com/300/600">