JS滚轮切换效果是一种通过监听鼠标滚轮事件来实现页面内容切换的交互效果。以下是对该效果的详细解释:
wheel
或mousewheel
。addEventListener
方法监听这些事件,并执行相应的回调函数。以下是一个简单的JS滚轮切换效果的示例代码:
let currentIndex = 0;
const contents = document.querySelectorAll('.content'); // 假设每个内容块都有一个.content类
window.addEventListener('wheel', function(event) {
if (event.deltaY > 0) { // 向下滚动
currentIndex++;
} else { // 向上滚动
currentIndex--;
}
// 限制索引范围
currentIndex = Math.max(0, Math.min(currentIndex, contents.length - 1));
// 切换内容显示
contents.forEach((content, index) => {
content.style.display = index === currentIndex ? 'block' : 'none';
});
});
event.deltaY
或event.wheelDelta
来兼容不同浏览器。transition: opacity 0.5s ease-in-out;
来实现淡入淡出的效果,并在切换时修改opacity
属性。没有搜到相关的文章