使用JavaScript和jQuery实现可循环、鼠标悬停暂停的自动滚动效果

本教程详细介绍了如何利用javascript和jquery为网页元素实现自动循环滚动功能，并集成鼠标悬停暂停与移出继续滚动的交互效果。通过管理滚动方向、动画状态和用户交互事件，我们将构建一个流畅且用户友好的滚动组件，适用于展示长列表内容，提升用户体验。

在网页开发中，有时我们需要让特定的内容区域自动滚动，以吸引用户注意或展示更多信息。更进一步，我们可能需要实现内容在到达底部后反向滚动，形成一个无限循环，并提供鼠标悬停暂停的功能，以方便用户阅读。本文将详细介绍如何利用jQuery的动画和事件处理能力来实现这一复杂而实用的功能。

1. HTML结构：定义可滚动容器

首先，我们需要一个HTML元素来承载我们的可滚动内容。这个元素通常是一个div，并且需要包含足够多的内容使其能够溢出，从而产生滚动条。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
</div>

在这个例子中，我们创建了一个ID为div1的div，并填充了多行文本。请注意，我们还引入了jQuery库，这是后续JavaScript代码的基础。

2. CSS样式：设置滚动容器的视觉表现

为了使div1具有滚动行为，我们需要为其设置固定的高度和overflow: auto属性。

立即学习“Java免费学习笔记（深入）”；

#div1 {
  height: 100px; /* 固定高度 */
  width: 200px;  /* 固定宽度 */
  border: 1px solid #ccc; /* 边框，美化效果 */
  overflow: auto; /* 当内容溢出时显示滚动条 */
}

通过设置height和overflow: auto，当div1内部内容的高度超过100px时，就会出现垂直滚动条。

wordpress主题：格子商铺主题

这是易秀购主题网转载的一款原创来至web主题公园的一款wordpress cms主题，非常适合做图片展示，或婚纱摄影类wordpress主题，采用了大气的网格化无缝设计，使列表以格子铺的方式排列，鼠标悬停的可以出现文章的简介。网站上方可以书写自己的广告语，图片也是可以替换掉的，图片会随着鼠标的移动而轻移，并且在鼠标滚动的时候，下面的模块会直接遮盖这个区域，这款wordpress cms主题视觉效果

2

查看详情

3. JavaScript/jQuery实现核心逻辑

核心的JavaScript逻辑将处理自动滚动、循环以及鼠标交互。我们将使用jQuery的animate()方法来实现平滑滚动，并结合回调函数实现循环。

var scrollSpeed = 5000; // 滚动动画持续时间（毫秒）
var scrollDirection = 1; // 滚动方向：1表示向下，-1表示向上
var paused = false;      // 全局暂停标志
var isMouseOver = false; // 鼠标是否悬停在元素上

/**
 * 启动或恢复自动滚动动画
 */
function startScroll() {
  var $div1 = $('#div1');
  var scrollHeight = $div1.prop('scrollHeight'); // 获取实际可滚动内容的高度
  var divHeight = $div1.height();               // 获取容器的可见高度

  // 只有在未暂停且鼠标未悬停时才执行滚动
  if (!paused && !isMouseOver) {
    if (scrollDirection === 1) { // 向下滚动
      // 动画滚动到底部
      $div1.animate({ scrollTop: scrollHeight - divHeight }, scrollSpeed, 'linear', function() {
        // 动画完成后，切换方向，并重新启动滚动
        scrollDirection = -1;
        startScroll();
      });
    } else { // 向上滚动
      // 动画滚动到顶部
      $div1.animate({ scrollTop: 0 }, scrollSpeed, 'linear', function() {
        // 动画完成后，切换方向，并重新启动滚动
        scrollDirection = 1;
        startScroll();
      });
    }
  }
}

// 文档加载完成后执行
$(document).ready(function() {
  // 页面加载时启动滚动
  startScroll();

  // 鼠标进入div时暂停滚动
  $('#div1').mouseenter(function() {
    isMouseOver = true; // 设置鼠标悬停标志
    paused = true;      // 设置暂停标志
    $(this).stop(true); // 停止当前所有动画，参数true表示清除队列
  });

  // 鼠标离开div时恢复滚动
  $('#div1').mouseleave(function() {
    isMouseOver = false; // 清除鼠标悬停标志
    paused = false;      // 清除暂停标志
    startScroll();       // 恢复滚动
  });
});

代码详解：

1. 全局变量:

   • scrollSpeed: 控制滚动动画完成的时间，单位为毫秒。
   • scrollDirection: 一个标志，1表示向下滚动，-1表示向上滚动。
   • paused: 一个布尔值，用于全局控制滚动是否暂停。
   • isMouseOver: 一个布尔值，记录鼠标是否悬停在div上。

2. startScroll() 函数:

   • 这是实现自动滚动的核心函数。
   • $div1.prop('scrollHeight') 获取了div内所有内容的实际高度，包括不可见部分。
   • $div1.height() 获取了div本身的可见高度。
   • if (!paused && !isMouseOver): 确保只有在未暂停且鼠标未悬停时才执行滚动逻辑。
   • 向下滚动 (scrollDirection === 1):
     • $div1.animate({ scrollTop: scrollHeight - divHeight }, scrollSpeed, 'linear', function() { ... });：使用animate()方法将scrollTop属性从当前位置平滑地动画到scrollHeight - divHeight。scrollHeight - divHeight代表滚动条能到达的最底部位置。
     • 'linear'：指定动画的缓动效果为线性，使滚动速度均匀。
     • 回调函数：当向下滚动动画完成后，将scrollDirection切换为-1（向上），然后递归调用startScroll()来启动向上滚动。
   • 向上滚动 (scrollDirection === -1):
     • $div1.animate({ scrollTop: 0 }, scrollSpeed, 'linear', function() { ... });：将scrollTop动画到0，即滚动到顶部。
     • 回调函数：当向上滚动动画完成后，将scrollDirection切换为1（向下），然后递归调用startScroll()来启动向下滚动。

3. $(document).ready():

   • 确保DOM完全加载后再执行JavaScript代码。
   • startScroll()：在页面加载时首次调用，启动自动滚动。
   • $('#div1').mouseenter()：当鼠标指针进入div1区域时触发。
     • isMouseOver = true; 和 paused = true;: 更新状态标志。
     • $(this).stop(true);: 这是关键！它会立即停止div1上所有正在进行的jQuery动画，并清除动画队列，从而实现暂停效果。
   • $('#div1').mouseleave()：当鼠标指针离开div1区域时触发。
     • isMouseOver = false; 和 paused = false;: 恢复状态标志。
     • startScroll();: 重新调用startScroll()函数，恢复自动滚动。

4. 总结与注意事项

• 平滑动画: 使用jQuery.animate()提供了比setInterval手动增加scrollTop更平滑、更易于控制的动画效果。
• 循环机制: 通过在animate()的回调函数中切换滚动方向并递归调用startScroll()，实现了无缝的循环滚动。
• 暂停与恢复: 利用mouseenter和mouseleave事件结合stop()方法，实现了高效且响应迅速的暂停/恢复功能。
• 性能: animate()在内部使用了requestAnimationFrame（如果浏览器支持），通常比setInterval更节省资源，尤其是在动画性能方面。
• 可访问性: 对于依赖自动滚动的关键内容，应考虑为用户提供额外的控制选项（如播放/暂停按钮），以提高可访问性。
• 内容动态性: 如果div1内的内容是动态加载的，你可能需要在内容更新后重新计算scrollHeight并可能重新启动滚动。

通过上述代码和详细解释，您现在应该能够轻松地在您的网页中实现一个功能完善、用户友好的循环自动滚动组件了。

以上就是使用JavaScript和jQuery实现可循环、鼠标悬停暂停的自动滚动效果的详细内容，更多请关注php中文网其它相关文章！