温馨提示×

jquery怎么实现文字上下滚动效果

小亿
221
2023-08-08 23:54:27
栏目: 编程语言

你可以使用jQuery的animate()方法来实现文字的上下滚动效果。以下是一个示例代码:

HTML部分:

<div id="scrolling-text">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Sed do eiusmod tempor incididunt</li>
<li>Ut labore et dolore magna aliqua</li>
<li>Ut enim ad minim veniam</li>
</ul>
</div>

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秒钟向上滚动一个列表项的高度,然后将该列表项放到列表的末尾,实现文字的上下滚动效果。你可以根据需要调整滚动的时间间隔和滚动的高度。

0