我是這樣寫文字輪播的

2021-07-26 17:03:39 字數 1312 閱讀 5739



功能點:

文字無縫輪播(不要在意為什麼在移動端還會有這樣的需求)

當一說到文字無縫滾動時,大家最先想到的是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...

如若,我是這樣的女子

纖陌紅塵,安然相遇。一次遇見,一段故事,我用素箋的紙和筆,寫在記憶的思緒裡。喜歡用文字去記錄生活,行走在文字的詩情畫意裡,編織乙個夢想,寫下一段情意。如若,我是這樣的女子。傾城素顏,巧笑嫣然。在心中的桃源裡修籬種菊,植一樹芳香,在黃昏的暗香浮動裡吟詩作畫,品茗香茶。避開塵世的喧囂,遠離世間的紛擾,讓...