jQuery文字輪播特效
閑談：離開學(xué)校那座象牙塔已經(jīng)也有大半年的事件了，生活中不再充滿了茫然只有忙碌。連續(xù)加班加點(diǎn)大半個月，做的活動項(xiàng)目終于算是告一段落了，而今天也將是考驗(yàn)其真正價值的時候，現(xiàn)在將這次開發(fā)中遇到的問題做一下總結(jié)。
項(xiàng)目背景： 這次的項(xiàng)目主要是做一次全國酒店人氣排名的營銷活動，主要是基于在微信中傳播，預(yù)計(jì)訪問量達(dá)到億級，并發(fā)做到2000+/s，且有不少的容錯預(yù)案，我這次主要負(fù)責(zé)前端首頁方面的展示效果。
功能點(diǎn)：
文字無縫輪播（不要在意為什么在移動端還會有這樣的需求）
當(dāng)一說到文字無縫滾動時，大家最先想到的是marquee，但是已經(jīng)好久沒有接觸這個標(biāo)簽了，w3c也不對其進(jìn)行維護(hù)了，并且還有最后必須等到全部滾動完畢才會再次滾動,并且對于rem布局采用基于px的滾動體驗(yàn)會非常的
差等等。。
第二個想到的是采用類似jquery實(shí)現(xiàn)的圖片輪播機(jī)制，可以基本完成，但是發(fā)現(xiàn)無論是jquery還是zepto文字在滾動的時候會抖動，可用性比較差。
再就是現(xiàn)在用到的css3 + 少量js，采用很少的代碼就可以實(shí)現(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無默認(rèn)間距 */
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的一些渲染機(jī)制，最好滾動的元素內(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的類名實(shí)現(xiàn)滾動效果，一開始的時候我也是想直接將css3滾動特效寫在滾動的元素上，但是在iPhone上發(fā)現(xiàn)首次加載當(dāng)前頁面的時候他不會自動滾動。
相關(guān)文章
下面小編就為大家?guī)硪黄狫Query為元素添加樣式的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
jQuery操作Select的Option上下移動及移除添加等等
jQuery操作Select Option：向上移動選中的option、向下移動選中的option、移除選中的option、獲取所有的option值、添加option等等，下面有個不錯的示例，感興趣的朋友不要錯過2013-11-11
這篇文章主要介紹了基于JQuery實(shí)現(xiàn)頁面定時彈出廣告,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
JQuery遍歷元素的后代和同胞實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫Query遍歷元素的后代和同胞實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這是一款效果非?？岬膉Query和CSS3通過AJAX調(diào)用切換頁面過渡動畫特效插件。該頁面切換特效使用AJAX來動態(tài)加載鏈接內(nèi)容，在頁面加載的時候，使用CSS3來制作非?？岬捻撁孢^渡動畫效果。插件中使用pushState方法來管理瀏覽器的瀏覽歷史，需要的朋友可以參考下2015-10-10
JQuery實(shí)現(xiàn)文字無縫滾動效果示例代碼(Marquee插件)
本篇文章主要介紹了JQuery實(shí)現(xiàn)文字無縫滾動效果示例代碼(Marquee插件)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了Jquery ajax基礎(chǔ)教程的相關(guān)資料,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了Jquery判斷頁面圖片是否加載失敗,加載失敗則顯示默認(rèn)圖片的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-06-06
Ben最近在負(fù)責(zé)一個購書網(wǎng)站，在網(wǎng)站的首頁上，有一個叫做“最新上架”的板塊，板塊的內(nèi)容比較簡單，只有書籍名稱，作者姓名和上架時間（如圖），當(dāng)初設(shè)計(jì)的時候并i沒有過于豐富的構(gòu)思2010-10-10
jquery實(shí)現(xiàn)Ctrl+Enter提交表單的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)Ctrl+Enter提交表單的方法,涉及jquery針對鍵盤按鍵的響應(yīng)與表單操作相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-07-07