jquery简单跑马灯上下

在网页设计中，跑马灯效果是一种常见的动画效果，它可以使文字或图片在有限的空间内上下滚动，从而吸引用户的注意力，本文将介绍如何使用jQuery来实现简单的跑马灯上下效果。

我们需要在HTML中创建一个包含需要滚动内容的容器，例如一个div元素，在这个div元素中，我们可以添加任意数量的子元素，例如p标签或img标签，这些子元素将作为跑马灯的内容进行滚动。

接下来，我们需要引入jQuery库，在HTML文件的头部，添加以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

我们可以编写JavaScript代码来实现跑马灯效果，我们需要设置一些基本参数，例如滚动速度、滚动方向和滚动次数，这些参数可以根据实际需求进行调整。

$(document).ready(function() {
  var speed = 10; // 滚动速度，单位为像素/秒
  var direction = 'up'; // 滚动方向，'up'表示向上滚动，'down'表示向下滚动
  var loop = true; // 是否循环滚动，true表示循环，false表示只滚动一次
  var scrollTimes = 5; // 滚动次数
});

接下来，我们需要编写一个函数来控制跑马灯的滚动，这个函数将根据设置的参数来调整容器的位置，从而实现滚动效果。

function scrollMarquee() {
  var container = $('.marquee'); // 获取容器元素
  var contentHeight = container.height(); // 获取容器内容的高度
  var visibleHeight = container.find('.content').height(); // 获取可见区域的高度
  var scrollTop = container.scrollTop(); // 获取当前滚动位置
  if (direction === 'up') {
    // 如果向上滚动，检查是否已经到达顶部
    if (scrollTop <= -visibleHeight) {
      // 如果已经到达顶部，重置滚动位置并更新内容
      container.scrollTop(0);
      container.find('.content').append(container.find('.content').first());
    } else {
      // 如果还没有到达顶部，继续向上滚动
      container.scrollTop(scrollTop + speed);
    }
  } else {
    // 如果向下滚动，检查是否已经到达底部
    if (scrollTop >= contentHeight - visibleHeight) {
      // 如果已经到达底部，重置滚动位置并更新内容
      container.scrollTop(0);
      container.find('.content').prepend(container.find('.content').last());
    } else {
      // 如果还没有到达底部，继续向下滚动
      container.scrollTop(scrollTop - speed);
    }
  }
}

我们需要在页面加载完成后开始滚动跑马灯，我们可以使用setInterval函数来实现定时滚动，我们还需要检查是否需要停止滚动，如果设置了循环滚动，那么当滚动次数达到指定值时，我们需要停止滚动；否则，我们需要在每次滚动后增加滚动次数。

var scrollInterval;
var scrollCount = 0;
var stopScrolling = false;
$(document).ready(function() {
  setInterval(function() {
    if (!stopScrolling && scrollCount < scrollTimes) {
      scrollMarquee(); // 调用滚动函数
      scrollCount++; // 增加滚动次数
    } else if (loop) {
      // 如果设置了循环滚动，重置滚动次数并重新开始滚动
      scrollCount = 0;
      scrollMarquee();
    } else {
      // 如果不需要循环滚动，清除定时器并停止滚动
      clearInterval(scrollInterval);
    }
  }, 1000 / speed); // 根据滚动速度设置定时器的间隔时间，单位为毫秒/像素/秒
});

至此，我们已经实现了一个简单的跑马灯上下效果，通过调整参数和样式，我们可以使这个效果更加美观和实用，希望本文对您有所帮助！