当前位置：首页 > JavaScript

代码实现js效果

2026-03-15 18:23:31JavaScript

使用原生JavaScript实现效果

通过document.getElementById或document.querySelector获取DOM元素，直接操作样式或属性。例如实现点击按钮改变背景色：

const button = document.querySelector('#changeColorBtn');
button.addEventListener('click', () => {
  document.body.style.backgroundColor = '#f0f0f0';
});

利用CSS类切换实现动画

通过classList.add/remove/toggle动态修改类名，配合CSS过渡效果。比如实现元素的淡入淡出：

代码实现js效果

.fade-element {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fade-element.active {
  opacity: 1;
}

const element = document.querySelector('.fade-element');
element.classList.add('active');

使用requestAnimationFrame实现高性能动画

适合需要精细控制的动画场景，例如平滑移动元素：

let position = 0;
function animate() {
  position += 2;
  element.style.transform = `translateX(${position}px)`;
  if (position < 200) {
    requestAnimationFrame(animate);
  }
}
animate();

通过事件委托优化动态元素

对于动态生成的元素，采用事件委托提高性能：

代码实现js效果

document.addEventListener('click', (e) => {
  if (e.target.matches('.dynamic-btn')) {
    console.log('动态按钮被点击');
  }
});

使用Intersection Observer实现懒加载

检测元素是否进入视口，实现图片懒加载：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

封装可复用效果函数

将常用效果封装为模块化函数，例如防抖函数：

function debounce(func, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}
window.addEventListener('resize', debounce(() => {
  console.log('窗口大小调整结束');
}, 300));