使用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：292feeltoTop（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在首页新闻中应用到的跑马灯效果的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！