怎么使用ionic在首页新闻中应用到的跑马灯效果-创新互联
这篇文章主要介绍了怎么使用ionic在首页新闻中应用到的跑马灯效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联建站专注于十堰企业网站建设,
成都响应式网站建设,
成都做商城网站。十堰网站建设公司,为十堰等地区提供建站服务。全流程按需网站策划，专业设计，全程项目跟踪，
创新互联建站专业和态度为您提供的服务
在app中经常会有滚动的跑马灯效果的运用，如图所示为跑马灯效果：
代码如下：
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在首页新闻中应用到的跑马灯效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站建设公司行业资讯频道，更多相关知识等着你来学习!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享题目：怎么使用ionic在首页新闻中应用到的跑马灯效果-创新互联
URL网址：
http://kswjz.com/article/dhijji.html
