使用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 相关文章推荐
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
JS打印组合功能
Aug 04 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
Angular的事件和表单详解
Dec 26 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php目录操作实例代码
2014/02/21 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
php图像处理类实例
2015/07/28 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
js 获取radio按钮值的实例
2013/08/17 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
pyside写ui界面入门示例
2014/01/22 Python
python读取html中指定元素生成excle文件示例
2014/04/03 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Python发展史及网络爬虫
2019/06/19 Python
Django静态文件加载失败解决方案
2020/08/26 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
代办委托书怎么写
2014/08/01 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书