这篇文章主要介绍了怎么使用ionic在首页新闻中应用到的跑马灯效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
在app中经常会有滚动的跑马灯效果的运用，如图所示为跑马灯效果：
代码如下：
html：
<div class="shouRight">
<ul class="slideTopbox" slide-scroll >
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1.我是第1行</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2.我是第2行</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3.我是第3行</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4.我是第4行</a></li>
</ul>
</div>css：
.slideTopbox {
width: 100%;
z-index: 99;
position: absolute;
top: 0;
color: #000;
}
.shouRight {
width: 100%;
z-index: 9999;
position: absolute;
top: 0;
height: 30px;
color: #000;
overflow: hidden;
line-height: 30px;
}js：
angular.module('starter.services', [])
.directive('slideScroll', function($window, $timeout) {
return {
restrict: 'AE',
link: function(scope, element, attr) {
var itsWatch = scope.$watch("its", function(newvalue, oldvalue) {
itsWatch();
var i = 1; //element是ul
var length = element[0].children.length;
var widthwindow = $window.innerWidth - 20;
var firstwidth = element[0].children[0].children[0].offsetWidth;
setInterval(function() {
if(i == length) {
i = 0;//初始位置
element[0].style.top = "0px";
}
var topscorll = -(i * 30);
var widthself = element[0].children[i].children[0].offsetWidth; //widthself：292
feeltoTop(topscorll)
i++;
}, 3000)
//向上滚动
function feeltoTop(topscorll){ //console.log(topscorll):topscorll是top值
var buchang = -10;
var feelTimer = setInterval(function(){
element[0].style.top = parseInt(element[0].style.top) + buchang + "px";
if(parseInt(element[0].style.top) <= topscorll){
element[0].style.top = topscorll + "px";
window.clearInterval(feelTimer);
}
},100);
}
})
}
}
})实现效果如图所示：
感谢你能够认真阅读完这篇文章，希望小编分享的“怎么使用ionic在首页新闻中应用到的跑马灯效果”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
