使用ionic在首頁(yè)新聞中應(yīng)用到的跑馬燈效果的實(shí)現(xiàn)方法

更新時(shí)間：2017年02月13日 15:33:49 作者：zuo-yiran

在app中經(jīng)常會(huì)有滾動(dòng)的跑馬燈效果的運(yùn)用，接下來(lái)通過(guò)本文給大家介紹使用ionic在首頁(yè)新聞中應(yīng)用到的跑馬燈效果的實(shí)現(xiàn)方法，需要的的朋友參考下

在app中經(jīng)常會(huì)有滾動(dòng)的跑馬燈效果的運(yùn)用，如圖所示為跑馬燈效果：

這里寫(xiě)圖片描述

代碼如下：

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)
     //向上滾動(dòng)
     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);
     }
   })
  }
 }
})

實(shí)現(xiàn)效果如圖所示：

這里寫(xiě)圖片描述

以上所述是小編給大家介紹的使用ionic在首頁(yè)新聞中應(yīng)用到的跑馬燈效果的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！