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

Question

我正在从事一个大学项目，该项目需要我设计一个包含动态 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());

Answer 1

许多错别字弄脏了你的代码——我建议使用一个应用程序，它可以在你编写时整理你的代码和/或标记错误（就我个人而言，我使用 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">