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

.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;

}

angular.module('starter.services', [])

.directive('slideScroll',function($window, $timeout) {

 return{

  restrict:'AE',

  link:function(scope, element, attr) {

   varitsWatch = scope.$watch("its",function(newvalue, oldvalue) {

     itsWatch();

     vari = 1;//element是ul

     varlength = element[0].children.length;

     varwidthwindow = $window.innerWidth - 20;

     varfirstwidth = element[0].children[0].children[0].offsetWidth;

     setInterval(function() {

      if(i == length) {

       i = 0;//初始位置

       element[0].style.top ="0px";

      }

      vartopscorll = -(i * 30);

      varwidthself = element[0].children[i].children[0].offsetWidth;//widthself：292

      feeltoTop(topscorll)

      i++;

     }, 3000)

     //向上滚动

     functionfeeltoTop(topscorll){//console.log(topscorll):topscorll是top值

      varbuchang = -10;

      varfeelTimer = 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);

     }

   })

  }

 }

})