js实现的一些效果
JavaScript 可以实现多种动态效果，以下是一些常见场景及实现方法：
滚动动画效果
使用 window.scrollTo 或第三方库实现平滑滚动：
window.scrollTo({
top: 1000,
behavior: 'smooth'
});元素淡入淡出
通过修改 CSS opacity 属性实现：
function fadeIn(element) {
let opacity = 0;
const timer = setInterval(() => {
if (opacity >= 1) clearInterval(timer);
element.style.opacity = opacity;
opacity += 0.1;
}, 50);
}拖拽功能
利用鼠标事件实现元素拖拽：
element.addEventListener('mousedown', (e) => {
const shiftX = e.clientX - element.getBoundingClientRect().left;
const shiftY = e.clientY - element.getBoundingClientRect().top;
function moveAt(pageX, pageY) {
element.style.left = pageX - shiftX + 'px';
element.style.top = pageY - shiftY + 'px';
}
function onMouseMove(e) {
moveAt(e.pageX, e.pageY);
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', onMouseMove);
});
});无限滚动加载
监听滚动位置动态加载内容：
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
loadMoreContent();
}
});实时搜索过滤
通过输入事件快速过滤数据：
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
const filteredItems = data.filter(item =>
item.name.toLowerCase().includes(searchTerm)
);
renderItems(filteredItems);
});响应式导航菜单
移动端菜单切换效果：
menuButton.addEventListener('click', () => {
navMenu.classList.toggle('active');
menuButton.classList.toggle('open');
});图片懒加载
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);
});表单验证
实时表单验证反馈：
form.addEventListener('input', (e) => {
const input = e.target;
if (input.validity.valid) {
input.classList.remove('invalid');
input.nextElementSibling.textContent = '';
} else {
input.classList.add('invalid');
showValidationError(input);
}
});这些实现方法可以根据具体需求进行调整和组合，现代 JavaScript 配合 CSS3 可以实现绝大多数交互效果。对于复杂动画场景，可以考虑使用 GSAP 或 Anime.js 等专业动画库。
