当前位置：首页 > JavaScript

js实现效果

2026-03-13 17:23:32JavaScript

在JavaScript中实现特定效果通常涉及DOM操作、事件处理、动画或异步请求等。以下是几种常见效果的实现方法及示例代码：

点击按钮显示/隐藏元素

通过切换CSS的display属性实现显隐效果：

js实现效果

const button = document.getElementById('toggleButton');
const element = document.getElementById('targetElement');

button.addEventListener('click', () => {
  if (element.style.display === 'none') {
    element.style.display = 'block';
  } else {
    element.style.display = 'none';
  }
});

平滑滚动到页面顶部

使用window.scrollTo配合动画实现：

function scrollToTop() {
  const scrollDuration = 500;
  const scrollStep = -window.scrollY / (scrollDuration / 15);

  const scrollInterval = setInterval(() => {
    if (window.scrollY === 0) {
      clearInterval(scrollInterval);
    } else {
      window.scrollBy(0, scrollStep);
    }
  }, 15);
}

实时搜索过滤列表

通过输入框事件动态过滤内容：

js实现效果

const searchInput = document.getElementById('searchInput');
const items = document.querySelectorAll('.list-item');

searchInput.addEventListener('input', (e) => {
  const searchTerm = e.target.value.toLowerCase();

  items.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = text.includes(searchTerm) ? 'block' : 'none';
  });
});

图片懒加载

使用Intersection Observer API延迟加载图片：

const lazyImages = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach(img => observer.observe(img));

拖放功能实现

通过拖拽API实现元素拖放：

const draggable = document.getElementById('draggable');
const dropzone = document.getElementById('dropzone');

draggable.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.id);
});

dropzone.addEventListener('dragover', (e) => {
  e.preventDefault();
});

dropzone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  e.target.appendChild(document.getElementById(id));
});