移动端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 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
Sea.JS知识总结
May 05 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php while循环得到循环次数
2013/10/26 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
一段实用的php验证码函数
2016/05/19 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
php实现session共享的实例方法
2019/09/19 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
python如何实现异步调用函数执行
2019/07/08 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
《会变的花树叶》教学反思
2014/02/10 职场文书
宾馆客房管理制度
2015/08/06 职场文书
《假如》教学反思
2016/02/17 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python