怎么使用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在首页新闻中应用到的跑马灯效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
当前文章：怎么使用ionic在首页新闻中应用到的跑马灯效果
文章地址：
http://bjjierui.cn/article/gojdec.html
