使用ionic在首页新闻中应用到的跑马灯效果的实现方法

在app中经常会有滚动的跑马灯效果的运用，如图所示为跑马灯效果：

代码如下：

html：

<div class="shouRight">
 <ul class="slideTopbox" slide-scroll style="top:0px;">
 <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在首页新闻中应用到的跑马灯效果的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！