想在网站首页上添加一个JS效果，www.azjun.com

Question

想在网站首页上添加一个JS效果，具体是这样的：

鼠标往下拉，图片就会慢慢的显示出来，图片一开始是不加载的，窗口拉倒哪里，就显示到哪里。

案例是这样的：https://www.azjun.com/libao/91540.html

有人知道怎么实现吗？

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

你想要实现的是一个滚动加载图片的效果，鼠标往下拉图片慢慢显示出来。这个效果可以使用 JavaScript 和 CSS 实现。

首先，我们需要创建一个容器来存放图片，然后使用 JavaScript 监听窗口的滚动事件，计算容器的高度和窗口的高度，判断是否需要加载图片。

下面是一个简单的示例代码：

<!-- HTML -->
<div class="image-container">
  <img src="image1.jpg" alt="image1" data-src="image2.jpg" />
  <img src="image1.jpg" alt="image2" data-src="image3.jpg" />
  <!-- 其他图片 -->
</div>

<!-- CSS -->
.image-container {
  position: relative;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s;
}

.image-container img[data-src] {
  opacity: 0;
}

.image-container img[data-src]:not(:in-view) {
  opacity: 0;
}

.image-container img[data-src]:in-view {
  opacity: 1;
}

// JavaScript
const imageContainer = document.querySelector('.image-container');
const images = imageContainer.querySelectorAll('img[data-src]');

function checkInView(img) {
  const rect = img.getBoundingClientRect();
  return rect.top <= window.innerHeight && rect.bottom >= 0;
}

function loadImages() {
  images.forEach((img) => {
    if (checkInView(img)) {
      img.src = img.dataset.src;
    }
  });
}

window.addEventListener('scroll', () => {
  loadImages();
});

这个示例代码使用了 CSS 选择器来选择图片，并使用 JavaScript 监听窗口的滚动事件，计算图片的高度和窗口的高度，判断是否需要加载图片。

你可以根据自己的需求修改代码，例如添加更多的图片或修改图片的加载方式。

希望这个示例代码能够帮助你实现你想要的效果！