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

网络编程 2024/11/15 佚名

3 2 1

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

实现效果如图所示：