好资源导航 » 文章资讯 » 移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)

移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)

2023-09-25 15:19:07 297

在ionicApp中遇到一个文字上下循环滚动的效果实现，网上查了之后才知道有个通俗的名字-跑马灯。

这里借助了jQuery库的选择器和动画函数，并且把jquery的操作封装到指令里。先看指令代码：

angular.module('starter')
.directive('slideScroll',function($window,$timeout){
return{
restrict:'AE',
link:function(scope,element,attr){
var_scrollHeight=40;
var_newsLen=3;
varindex=0;
setInterval(function(){
index+=1;
if(index>_newsLen){
index=0;
$(".news-rightul").css({
top:0
})
}else{
$(".news-rightul").animate({
top:-_scrollHeight*index-10*index
},500);
}
},2000)
}
};
});

滚动的高度scrollHeight设置为40px，三组文字newsLen循环，每组两行文字。每隔2000ms，ul列表向上移动固定距离，top值为（_scrollHeight+10）*index的长度。

Html代码是这样的：




{{item.title.length<=19?item.title:item.title.slice(0,19)+'...'}}


{{item1.title.length<=19?item1.title:item1.title.slice(0,19)+'...'}}

这里对文字做了简单的处理，字符串超过19，会以“...”的形式显示。

Css样式表是这样的：

.news-right{
position:absolute;
height:40px;
left:100px;
top:10px;
right:0;
color:rgb(65,65,65);
overflow:hidden;
}
.news-rightul{
width:100%;
position:absolute;
top:0;
left:0;
}
.news-rightp{
padding:0;
line-height:15px;
text-overflow:ellipsis;
box-sizing:border-box;
white-space:nowrap;
font-size:13px;
}

总结

以上所述是小编给大家介绍的移动端IonicApp资讯上下循环滚动的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)

热门推荐

随机推荐