js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)资源-CSDN文库

136 浏览量 2020-11-22 09:17:34 上传评论收藏 77KB PDF 举报

本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下： <!DOCTYPE html> <html> <head> <title>wheel</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> [removed] var currentShowPageIndex = 0; var animateTimeout = null; var isWh 在JavaScript编程中，实现鼠标滚轮滚动切换页面效果是一种常见的交互设计，特别是在创建类似360浏览器默认的页面浏览体验时。本实例介绍了一种利用JS实现这一效果的方法，通过监听鼠标的滚轮事件，结合CSS动画来实现平滑的页面切换。为了实现这个效果，我们需要设置一些基础的HTML结构和CSS样式。在这个例子中，有一个包含多个页面的容器（`#wheelUl`），以及一个导航条（`#barUl`）来指示当前显示的页面。每个页面元素（`li`）的宽度是1000像素，当滚轮事件触发时，通过改变容器的`marginLeft`属性来实现页面的平滑滚动。关键的JavaScript代码如下： 1. 定义变量：`currentShowPageIndex`记录当前显示的页面索引，`animateTimeout`用于存储动画的定时器，`isWheelAnimating`标记是否正在进行滚动动画。 2. 函数`isWheelUp(event)`判断滚轮事件的方向，根据不同的浏览器实现不同。如果滚轮向上滚动，返回`true`；反之，返回`false`。 3. 函数`changeBar(prevIndex, index)`用于切换导航条上的选中状态，当页面切换时，移除旧的选中状态并添加新的选中状态。 4. 函数`changePage(pageIndex)`实际执行页面切换操作，更新`currentShowPageIndex`，然后计算新的`marginLeft`值以平移页面容器。 5. 函数`animate(obj, mode, from, to)`是一个简单的动画函数，根据指定的方向（"left"或"right"）平滑地改变对象的位置。它使用setTimeout递归调用自身，每次移动50像素，直到达到目标位置。 6. 最核心的函数`mouseWheel(event)`监听滚轮事件。如果正在执行动画，则不处理新的事件。根据滚轮方向，调用`changeBar()`和`changePage()`，并启动动画函数`animate()`来平滑地滚动页面。 7. `mouseWheel`函数还计算了当前页面的偏移量、总页面数等信息，确保滚动操作在合理范围内进行。为了实现这个效果，你需要将上述代码嵌入到HTML页面的`<head>`或`<body>`标签内的`<script>`标签中，并且确保所有相关的DOM元素都已加载完成。在实际应用中，可能还需要考虑兼容性问题，例如为不支持`wheelDelta`的Firefox浏览器提供相应的处理逻辑。通过JavaScript监听滚轮事件并结合CSS动画，可以实现类似360浏览器那样的平滑页面滚动切换效果，提升用户体验。这种技术常用于构建响应式和动态的网页应用，尤其在需要展示多页面内容且希望保持流畅交互的情况下。

资源推荐

资源详情

资源评论