怎么使用ionic在首页新闻中应用到的跑马灯效果-创新互联

这篇文章主要介绍了怎么使用ionic在首页新闻中应用到的跑马灯效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联建站专注于十堰企业网站建设,成都响应式网站建设,成都做商城网站。十堰网站建设公司,为十堰等地区提供建站服务。全流程按需网站策划,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务

在app中经常会有滚动的跑马灯效果的运用,如图所示为跑马灯效果:

怎么使用ionic在首页新闻中应用到的跑马灯效果

代码如下:

html:


 
  
  • 1.我是第1行
  •   
  • 2.我是第2行
  •   
  • 3.我是第3行
  •   
  • 4.我是第4行
  •  

    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在首页新闻中应用到的跑马灯效果

    感谢你能够认真阅读完这篇文章,希望小编分享的“怎么使用ionic在首页新闻中应用到的跑马灯效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站建设公司行业资讯频道,更多相关知识等着你来学习!

    另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    网站栏目:怎么使用ionic在首页新闻中应用到的跑马灯效果-创新互联
    文章链接:http://ybzwz.com/article/dhijji.html

    其他资讯