移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)


Posted in Javascript onAugust 29, 2017

在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 代码是这样的:

<div class="news-right" ui-sref="newsList"> 
   <ul slide-scroll> 
      <li class="news-box" ng-repeat="row in dataArr"> 
        <p ng-repeat="item in row">{{item.title.length <= 19 ? item.title : item.title.slice(0, 19) + '...'}}</p> 
      </li> 
      <li> 
         <p ng-repeat="item1 in dataArr[0]">{{item1.title.length <= 19 ? item1.title : item1.title.slice(0, 19) + '...'}}</p> 
      </li> 
   </ul> 
</div>

这里对文字做了简单的处理,字符串超过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 资讯上下循环滚动的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
JS定义类的六种方式详解
May 12 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
基于jstree使用AJAX请求获取数据形成树
Aug 29 #Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 #jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 #jQuery
Vue2.0权限树组件实现代码
Aug 29 #Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 #Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 #jQuery
laravel5.4+vue+element简单搭建的示例代码
Aug 29 #Javascript
You might like
PHP实现无限分类的实现方法
2016/11/14 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
Python实现简单的四则运算计算器
2016/11/02 Python
python分数表示方式和写法
2019/06/26 Python
python 读取修改pcap包的例子
2019/07/23 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
python创建子类的方法分析
2019/11/28 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
python Xpath语法的使用
2020/11/26 Python
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
提拔干部考察材料
2014/05/26 职场文书
工会工作先进事迹
2014/08/18 职场文书
大学生个人学年总结
2015/02/15 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
安全生产标语口号
2015/12/26 职场文书