你可以使用jQuery的animate()方法来实现文字的上下滚动效果。以下是一个示例代码:
HTML部分:
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Sed do eiusmod tempor incididunt
- Ut labore et dolore magna aliqua
- Ut enim ad minim veniam
CSS部分:
#scrolling-text { height: 100px; overflow: hidden; } #scrolling-text ul { list-style-type: none; padding: 0; margin: 0; } #scrolling-text li { line-height: 25px; }
JavaScript部分:
$(document).ready(function() { function scrollText() { var firstItem = $('#scrolling-text ul li:first'); var height = firstItem.outerHeight(); firstItem.animate({ 'margin-top': -height }, 1000, function() { $(this).css('margin-top', 0).appendTo('#scrolling-text ul'); }); } setInterval(scrollText, 2000); });
这个示例代码会每隔2秒钟向上滚动一个列表项的高度,然后将该列表项放到列表的末尾,实现文字的上下滚动效果。你可以根据需要调整滚动的时间间隔和滚动的高度。