使用ionic在首页新闻中应用到的跑马灯效果的实现方法
更新时间:2017年2月19日 10:00 点击:2143
在app中经常会有滚动的跑马灯效果的运用,如图所示为跑马灯效果:
代码如下:
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) //向上滚动 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在首页新闻中应用到的跑马灯效果的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
- 这篇文章主要为大家详细介绍了Ionic默认的Tabs模板使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- 这篇文章主要介绍了基于Vue的文字跑马灯组件(npm 组件包),需要的朋友可以参考下...2017-05-27
- Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用。接下来小编给大家介绍如何安装 Ionic 在自己的电脑上搭建一个简单的小应用,感兴趣的朋友一起看看吧...2016-06-12
- 在日常项目开发中我们经常见到下拉刷新上拉加载的功能,接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下...2016-06-12
- 在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,基于ionic怎么实现呢?下面小编给大家分享ionic中列表项增加和删除的实现方法,一起看看吧...2017-01-26
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
这篇文章主要介绍了Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析的相关资料,需要的朋友可以参考下...2016-01-21- 这篇文章主要为大家详细介绍了ionic实现可滑动的tab选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- 这篇文章主要为大家介绍了javascript跑马灯抽奖特效,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-01-12
- 这篇文章主要介绍了Ionic2调用本地SQlite实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-04-27
- 在app中经常会有滚动的跑马灯效果的运用,接下来通过本文给大家介绍使用ionic在首页新闻中应用到的跑马灯效果的实现方法,需要的的朋友参考下...2017-02-19
- 这篇文章主要为大家详细介绍了ionic实现带字的toggle滑动组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- 这篇文章主要为大家详细介绍了ionic组件ion-tabs选项卡切换效果实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- 这篇文章主要介绍Ionic如何创建APP项目的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下...2016-06-12
AngularJS之ionic 框架下实现 Localstorage本地存储
这篇文章主要介绍了AngularJS之ionic 框架下实现 Localstorage本地存储,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-04-27- 这篇教程将展示如何使用Ionic2添加一个简单的删除按钮到列表,当用户滑动列表项到左边的时候。这是一个处理删除列表数据时候常用的模式,具体内容大家通过本文学习吧...2017-01-26
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
很是郁闷!ionic中获取ng-model绑定的值为undefined,如何解决?...2016-09-01- 这篇文章主要为大家详细介绍了ionic隐藏tabs的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
Ionic实现页面下拉刷新(ion-refresher)功能代码
这篇文章主要介绍了使用Ionic实现页面下拉刷新(ion-refresher)功能的代码,感兴趣的朋友一起看看吧...2016-06-12- 下面小编就为大家带来一篇jQuery+CSS3文字跑马灯特效的简单实现。小编觉得挺不错的,现在就分享给大家看,也给大家做个参考。一起跟随小编过来看看吧...2016-07-01