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

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

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

代码如下：

html：

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 + "http://px";

if(parseInt(element[0].style.top) <= topscorll){

element[0].style.top = topscorll + "px";

window.clearInterval(feelTimer);

}

},100);

}

})

}

}

})

实现效果如图所示：

以上所述是给大家介绍的使用ionic在首页新闻中应用到的跑马灯效果的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。