使用ionic在首页新闻中应用到的跑马灯效果的实现方法


Posted in Javascript onFebruary 13, 2017

在app中经常会有滚动的跑马灯效果的运用,如图所示为跑马灯效果:

使用ionic在首页新闻中应用到的跑马灯效果的实现方法 

代码如下:

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在首页新闻中应用到的跑马灯效果的实现方法

以上所述是小编给大家介绍的使用ionic在首页新闻中应用到的跑马灯效果的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
你真的了解BOM中的history对象吗
Feb 13 #Javascript
微信小程序-获得用户输入内容
Feb 13 #Javascript
js实现textarea限制输入字数
Feb 13 #Javascript
Canvas实现动态的雪花效果
Feb 13 #Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 #Javascript
Bootstrap选项卡学习笔记分享
Feb 13 #Javascript
jQuery Ajax全解析
Feb 13 #Javascript
You might like
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
vue 自定义 select内置组件
2018/04/10 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
详解Python中的join()函数的用法
2015/04/07 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
Python 图片处理库exifread详解
2021/02/25 Python
军训自我鉴定
2013/12/14 职场文书
药品促销活动方案
2014/02/14 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
捐赠仪式主持词
2014/03/19 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
转让协议书
2015/01/27 职场文书
社区党建工作总结2015
2015/05/13 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
边城读书笔记
2015/06/29 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js
Vue Element plus使用方法梳理
2022/12/24 Vue.js