在app中经常会有滚动的跑马灯效果的运用，如图所示为跑马灯效果：
代码如下：
html：
<div> <ul slide-scroll> <li><a href="#" >1.我是第1行</a></li> <li><a href="#" >2.我是第2行</a></li> <li><a href="#" >3.我是第3行</a></li> <li><a href="#" >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在首页新闻中应用到的跑马灯效果的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！