jquery实现文字左右滚动

要使用jQuery实现文字的左右滚动,需要页面先调用jQuery库,可以使用animate方法结合marquee效果。marquee-container是文字滚动的容器,marquee-text是需要滚动的文本。start-scroll按钮触发滚动,stop-scroll按钮停止滚动。scroll函数负责实际滚动动作,通过animate方法和递归调用实现循环滚动。以下是一个简单的例子:

代码

<div id=“marquee-container”>
  <p id=“marquee-text”>这里是需要滚动的文字内容…</p>
</div>

<button id=“start-scroll”>开始滚动</button> <button id=“stop-scroll”>停止滚动</button>

#marquee-container {
  white-space: nowrap;
  overflow: hidden;
  width: 250px; /* 根据需要设置容器宽度 */
}

#marquee-text { position: absolute; }

\((document).ready(function() {
  var \)marqueeText = \(('#marquee-text');
  var scrollWidth = \)marqueeText[0].scrollWidth;
  var containerWidth = $(‘#marquee-container’).width();

function scroll() {

$marqueeText.animate({
  left: -scrollWidth + containerWidth
}, 10000, 'linear', function() {
  $marqueeText.css('left', containerWidth);
  scroll();
});

}

$(‘#start-scroll’).on(‘click’, function() {

scroll();

});

$(‘#stop-scroll’).on(‘click’, function() {

$marqueeText.stop();

}); });

过期时间:永久公开
创建于:2024-03-21 17:58
176