如何实现移动端IonicApp资讯上下循环滚动效果
这篇文章给大家分享的是有关如何实现移动端Ionic App资讯上下循环滚动效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
站在用户的角度思考问题,与客户深入沟通,找到内蒙古网站设计与内蒙古网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、网站建设、企业官网、英文网站、手机端网站、网站推广、域名申请、虚拟主机、企业邮箱。业务覆盖内蒙古地区。
这里借助了jQuery库的选择器和动画函数,并且把jquery的操作封装到指令里。先看指令代码:
angular.module('starter') .directive('slideScroll', function ($window, $timeout) { return { restrict: 'AE', link: function (scope, element, attr) { var _scrollHeight = 40; var _newsLen = 3; var index = 0; setInterval(function () { index += 1; if (index > _newsLen) { index = 0; $(".news-right ul").css({ top: 0 }) } else { $(".news-right ul").animate({ top: -_scrollHeight * index - 10 * index }, 500); } }, 2000) } }; });
滚动的高度scrollHeight设置为40px,三组文字newsLen循环,每组两行文字。每隔2000ms,ul列表向上移动固定距离,top值为(_scrollHeight + 10)* index 的长度。
Html 代码是这样的:
{{item.title.length <= 19 ? item.title : item.title.slice(0, 19) + '...'}}
{{item1.title.length <= 19 ? item1.title : item1.title.slice(0, 19) + '...'}}
这里对文字做了简单的处理,字符串超过19,会以“...”的形式显示。
Css 样式表是这样的:
.news-right { position: absolute; height: 40px; left: 100px; top: 10px; right: 0; color: rgb(65, 65, 65); overflow: hidden; } .news-right ul{ width: 100%; position: absolute; top: 0; left: 0; } .news-right p { padding: 0; line-height: 15px; text-overflow: ellipsis; box-sizing: border-box; white-space: nowrap; font-size: 13px; }
感谢各位的阅读!关于“如何实现移动端Ionic App资讯上下循环滚动效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
名称栏目:如何实现移动端IonicApp资讯上下循环滚动效果
本文地址:http://scyanting.com/article/jicchh.html