css部分
@keyframes scroll {
//0%和100%的位置可以根据实际情况调整
0% {
transform: translateY(30%);
}
100% {
transform: translateY(-100%); //此处可以减去10px多留一些空间
}
}
#jobList {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
animation: scroll 500s linear infinite forwards;
}
JS部分
$(document).ready(function(){
var jobList = $('#jobList');
var contentHeight = jobList.outerHeight(); // 获取内容高度
var animationDuration = contentHeight / 50; // 根据内容高度计算动画持续时间,调整数字以控制滚动速度
// 动态设置动画持续时间
jobList.css('animation', 'scroll ' + animationDuration + 's linear infinite');
// 鼠标移入事件
jobList.mouseenter(function(){
// 停止滚动动画
$(this).css('animation-play-state', 'paused');
});
// 鼠标移出事件
jobList.mouseleave(function(){
// 继续滚动动画
$(this).css('animation-play-state', 'running');
});
});
jQuery实现
js部分
var box = $('#subscribe_scroll');
// 定义向上移动的函数
function moveUp() {
box.css('top','0')
// 找到第一个子元素,并移除
var firstChild = box.children().first().remove()
// 将移除的子元素添加到最后一个位置
box.append(firstChild);
// 执行向上移动动画
box.animate({
top: '-=20px'
}, '2000', function() {
// 等待2秒后再次调用 moveUp 函数
if(that.bottom_is_showWeChatQrcode){
setTimeout(moveUp, 2000);
}
});
}
// 初始调用 moveUp 函数开始动画
moveUp();