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

2019-11-19 17:36:24

字体：大中小

来源：转载

供稿：网友

在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);     }   })  } }})

实现效果如图所示：

这里写图片描述