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