jQuery文字輪播特效
閑談:離開學(xué)校那座象牙塔已經(jīng)也有大半年的事件了,生活中不再充滿了茫然只有忙碌。連續(xù)加班加點大半個月,做的活動項目終于算是告一段落了,而今天也將是考驗其真正價值的時候,現(xiàn)在將這次開發(fā)中遇到的問題做一下總結(jié)。
項目背景: 這次的項目主要是做一次全國酒店人氣排名的營銷活動,主要是基于在微信中傳播,預(yù)計訪問量達到億級,并發(fā)做到2000+/s,且有不少的容錯預(yù)案,我這次主要負責(zé)前端首頁方面的展示效果。
功能點:
文字無縫輪播(不要在意為什么在移動端還會有這樣的需求)
當(dāng)一說到文字無縫滾動時,大家最先想到的是marquee,但是已經(jīng)好久沒有接觸這個標(biāo)簽了,w3c也不對其進行維護了,并且還有最后必須等到全部滾動完畢才會再次滾動,并且對于rem布局采用基于px的滾動體驗會非常的
差等等。。
第二個想到的是采用類似jquery實現(xiàn)的圖片輪播機制,可以基本完成,但是發(fā)現(xiàn)無論是jquery還是zepto文字在滾動的時候會抖動,可用性比較差。
再就是現(xiàn)在用到的css3 + 少量js,采用很少的代碼就可以實現(xiàn)文字不同長度,文字條數(shù)不定的文字無縫滾動輪播。
下面先看html結(jié)構(gòu)
<div class="outer"> <ul id="J_scroll"> <li>1.這是第一條數(shù)據(jù)</li> <li>2.這是第二條數(shù)據(jù)</li> <li>3.這是第三條數(shù)據(jù)</li> <li>4.這是第四條數(shù)據(jù)</li> <li>5.這是第五條數(shù)據(jù)</li> <li>1.這是第一條數(shù)據(jù)</li> </ul> </div>
與圖片的無縫滾動一樣,也需要將第一條數(shù)據(jù)拷貝一份放在最后面
其次是css的相關(guān)數(shù)據(jù)
.outer{ width: 122px; height: 80px; overflow: hidden; } .outer ul{ display:inline-block; height: 80px; -webkit-transform: translate3d(0, 0, 0); /* 3d渲染,開啟硬件加速 */ transform: translate3d(0, 0, 0); font-size: 0; /* 使inline-block無默認間距 */ white-space: nowrap; /* 超出不折行 */ } .outer ul li{ display: inline-block; padding-right: 50px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); font-size: 24px; } .theanimation{ animation:theanimation 20s infinite linear; -webkit-animation:theanimation 20s infinite linear; } @keyframes theanimation{ from { transform:translateX(0%); } to { transform:translateX(-100%); } } @-webkit-keyframes theanimation{ from { -webkit-transform:translateX(0%); } to { -webkit-transform:translateX(-100%); } }
由于IOS的一些渲染機制,最好滾動的元素內(nèi)部都需要啟動硬件加速,否則會有卡頓和文字顯示不全的問題。
最后是js
$('#J_scroll').width($('#J_scroll').width() - $('#J_scroll li:first-child').innerWidth()); $('#J_scroll').addClass('theanimation');
這里還是寫的jquery,相信大家都能看的懂,就是讓滾動元素的寬度等于他的內(nèi)部元素的總寬度減去第一個(或者最后一個)元素的寬度,這樣能保證無縫的效果。
最后要說明為什么要用js動態(tài)添加css3的類名實現(xiàn)滾動效果,一開始的時候我也是想直接將css3滾動特效寫在滾動的元素上,但是在iPhone上發(fā)現(xiàn)首次加載當(dāng)前頁面的時候他不會自動滾動。
相關(guān)文章
jQuery動態(tài)創(chuàng)建元素以及追加節(jié)點的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query動態(tài)創(chuàng)建元素以及追加節(jié)點的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10jquery實現(xiàn)marquee效果(文字或者圖片的水平垂直滾動)
原本在前端html代碼中,實現(xiàn)文字或者圖片的水平垂直滾動,都是使用的marquee,但隨著考慮瀏覽器的兼容性和符合為w3c的標(biāo)準(zhǔn),接下來介紹使用Jquery實現(xiàn)網(wǎng)頁marquee效果,感興趣的朋友可以了解下哦2013-01-01jQuery實現(xiàn)表單步驟流程導(dǎo)航代碼分享
這篇文章主要介紹了jQuery實現(xiàn)表單步驟流程導(dǎo)航,代碼實現(xiàn)效果簡單精致,推薦給大家,有需要的小伙伴可以參考下。2015-08-08jQuery實現(xiàn)鼠標(biāo)單擊網(wǎng)頁文字后在文本框顯示的方法
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)單擊網(wǎng)頁文字后在文本框顯示的方法,可實現(xiàn)鼠標(biāo)點擊上方文字即可在下方勾選處文本框顯示對應(yīng)文字的效果,涉及jQuery鼠標(biāo)事件及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下2015-05-05jQuery + html + css 實現(xiàn)王者榮耀官網(wǎng)首頁效果&nb
這篇文章主要介紹了jQuery + html + css 實現(xiàn)王者榮耀官網(wǎng)首頁效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02