在ionic App中遇到一个文字上下循环滚动的效果实现,网上查了之后才知道有个通俗的名字-跑马灯。
这里借助了jQuery库的选择器和动画函数,并且把jquery的操作封装到指令里。先看指令代码:
_newsLen) {
index = 0;
$(".news-right ul").css({
top: 0
})
} else {
$(".news-right ul").animate({
top: -_scrollHeight * index - 10 * index
},500);
}
},2000)
}
};
});
滚动的高度scrollHeight设置为40px,三组文字newsLen循环,每组两行文字。每隔2000ms,ul列表向上移动固定距离,top值为(_scrollHeight + 10)* index 的长度。
Html 代码是这样的: