使用ionic在首頁新聞中應(yīng)用到的跑馬燈效果的實(shí)現(xiàn)方法
在app中經(jīng)常會(huì)有滾動(dòng)的跑馬燈效果的運(yùn)用,如圖所示為跑馬燈效果:
代碼如下:
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) //向上滾動(dòng) 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); } }) } } })
實(shí)現(xiàn)效果如圖所示:
以上所述是小編給大家介紹的使用ionic在首頁新聞中應(yīng)用到的跑馬燈效果的實(shí)現(xiàn)方法,希望對(duì)大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
發(fā)布一個(gè)基于javascript的動(dòng)畫類 Fx.js
支持大部分CSS3屬性的動(dòng)畫(可能要指定詳細(xì)的屬性值)。2010-11-11用js實(shí)現(xiàn)的十進(jìn)制的顏色值轉(zhuǎn)換成十六進(jìn)制的代碼
用js實(shí)現(xiàn)的十進(jìn)制的顏色值轉(zhuǎn)換成十六進(jìn)制的代碼...2007-03-03關(guān)于在IE下的一個(gè)安全BUG --可用于跟蹤用戶的系統(tǒng)鼠標(biāo)位置
本篇文章小編將為大家介紹,關(guān)于在IE下的一個(gè)安全BUG --可用于跟蹤用戶的系統(tǒng)鼠標(biāo)位置。需要的朋友可以參考一下2013-04-04BootStrap表單控件之復(fù)選框checkbox和單選擇按鈕radio
這篇文章主要介紹了BootStrap表單控件之復(fù)選框checkbox和單選擇按鈕radio的相關(guān)資料,需要的朋友可以參考下2017-05-05JavaScript展開運(yùn)算符用法及實(shí)際應(yīng)用詳解
展開運(yùn)算符是JavaScript中的語法糖,用三個(gè)點(diǎn)(...)表示,廣泛應(yīng)用于數(shù)組和對(duì)象的操作,本文介紹了其基本用法,如在數(shù)組和對(duì)象中的應(yīng)用,合并數(shù)組或?qū)ο?更新對(duì)象屬性等,還探討了展開運(yùn)算符的高級(jí)應(yīng)用,需要的朋友可以參考下2024-09-09淺談JS中String()與 .toString()的區(qū)別
下面小編就為大家?guī)硪黄獪\談JS中String()與 .toString()的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10JavaScript實(shí)現(xiàn)簡單圖片翻轉(zhuǎn)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡單圖片翻轉(zhuǎn)的方法,涉及javascript操作圖片與數(shù)組的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04