JS特效第104弹:jQuery实现文字无缝滚动效果
warning:
这篇文章距离上次修改已过200天,其中的内容可能已经有所变动。
// 确保DOM完全加载完毕
$(document).ready(function() {
// 初始化滚动高度
var scrollHeight = 0;
// 无缝滚动函数
function smoothScroll(selector, speed) {
// 计算滚动高度
var scrollHeight = $(selector).scrollTop();
// 滚动动画
$(selector).animate({
scrollTop: scrollHeight + speed
}, 500);
}
// 定义滚动按钮事件
$('#btn-scroll').click(function() {
// 调用无缝滚动函数
smoothScroll('.scroll-text', 50);
});
});
这段代码使用jQuery实现了一个简单的无缝滚动效果。用户点击按钮时,指定的文本区域将以平滑的动画效果向下滚动。这是一个典型的jQuery事件处理和动画应用案例。
评论已关闭