移动端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 相关文章推荐
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
基于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
3种php生成唯一id的方法
2015/11/23 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
vue中的scope使用详解
2017/10/29 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
Python中字典和JSON互转操作实例
2015/01/19 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
python后端接收前端回传的文件方法
2019/01/02 Python
解析python的局部变量和全局变量
2019/08/15 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
综治维稳工作承诺书
2014/08/30 职场文书
2014年度培训工作总结
2014/11/27 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
导游词之吉林吉塔
2019/11/11 职场文书