功能點:
文字無縫輪播(不要在意為什麼在移動端還會有這樣的需求)
當一說到文字無縫滾動時,大家最先想到的是marquee,但是已經好久沒有接觸這個標籤了,w3c也不對其進行
維護了,並且還有最後必須等到全部滾動完畢才會再次滾動,並且對於rem布局採用基於px的滾動體驗會非常的
差等等。。
第二個想到的是採用類似jquery實現的輪播機制,可以基本完成,但是發現無論是jquery還是zepto文字在
滾動的時候會抖動,可用性比較差。
再就是現在用到的css3 + 少量js,採用很少的**就可以實現文字不同長度,文字條數不定的文字無縫滾動輪
播。下面先看html結構
class=
"outer"
>
id="j_scroll"
>
1.這是第一條資料li>
2.這是第二條資料li>
3.這是第三條資料li>
4.這是第四條資料li>
5.這是第五條資料li>
1.這是第一條資料li>
ul>
div>
與的無縫滾動一樣,也需要將第一條資料拷貝乙份放在最後面
其次是css的相關資料
.outer
.outer
ul.outer
ulli
.theanimation
@keyframes theanimationto
}@-webkit-keyframes theanimation
to }
由於ios的一些渲染機制,最好滾動的元素內部都需要啟動硬體加速,否則會有卡頓和文字顯示不全的問題。
最後是js
$('#j_scroll'
).width($('#j_scroll'
).width() -
$('#j_scroll li:first-child'
).innerwidth());
$('#j_scroll'
).addclass('theanimation'
);
這裡還是寫的jquery,相信大家都能看的懂,就是讓滾動元素的寬度等於他的內部元素的總寬度減去第乙個
(或者最後乙個)元素的寬度,這樣能保證無縫的效果。
最後要說明為什麼要用js動態新增css3的類名實現滾動效果,一開始的時候我也是想直接將css3滾動特效寫在
滾動的元素上,但是在iphone上發現首次載入當前頁面的時候他不會自動滾動。
未完待續。。。
超簡單的文字輪播
這是一段耐人尋味的 當然了你想看就看,不想看就直接跳過。兩分鐘即可寫出文字輪播,因為這是封裝的乙個js檔案,主要是使用簡單。fn.extend var this this.eq 0 find ul first var lineh this.find li first height 獲取行高 line...
一款簡單實用的文字輪播器
用處 為了解決文字過長顯示不全的雞肋,進行如led屏的輪播機制,進行輪播,將所有文字展現出來。dctextcirclelabel是我封裝的文字輪播器,直接載入到view 上面使用即可。dctextcirclelabel.h檔案裡 import inte ce dctextcirclelabel ui...
如若,我是這樣的女子
纖陌紅塵,安然相遇。一次遇見,一段故事,我用素箋的紙和筆,寫在記憶的思緒裡。喜歡用文字去記錄生活,行走在文字的詩情畫意裡,編織乙個夢想,寫下一段情意。如若,我是這樣的女子。傾城素顏,巧笑嫣然。在心中的桃源裡修籬種菊,植一樹芳香,在黃昏的暗香浮動裡吟詩作畫,品茗香茶。避開塵世的喧囂,遠離世間的紛擾,讓...