情況描述
客戶(hù)想在手機(jī)頂部的nav顯示單行文字時(shí),在字?jǐn)?shù)較多,一屏顯示不下的情況下,文字可以滾動(dòng)起來(lái).一開(kāi)始,我是用的php做了一下字?jǐn)?shù)的判斷,如果字?jǐn)?shù)比10個(gè)多就添加一個(gè)<marquee>標(biāo)簽,來(lái)制作這個(gè)滾動(dòng)效果。
選取<marquee>標(biāo)簽這樣的方法,主要是考慮到這樣是能兼容所有的平臺(tái)的絕大部分機(jī)型的。
這里首先做一個(gè)反省,這個(gè)問(wèn)題是要考慮響應(yīng)問(wèn)題的,不是隨意規(guī)定字?jǐn)?shù);這個(gè)問(wèn)題應(yīng)該交給js處理而不是php.
接下來(lái),當(dāng)我以為這樣就大功告成的時(shí)候,設(shè)計(jì)部的同事告訴我說(shuō),客戶(hù)要求,在文字可以滾動(dòng)的情況,滾動(dòng)文字
的開(kāi)頭要從左端開(kāi)始向右滾動(dòng)。但是我在查閱資料后發(fā)現(xiàn),<marquee>標(biāo)簽只能從一端滾動(dòng)到另一端,不能
設(shè)定開(kāi)始滾動(dòng)的位置。
好吧,那我只能先踏上尋找解決方案的征程了~~~(偶也)
解決問(wèn)題的過(guò)程
一開(kāi)始我能想到的首先就是用js來(lái)模擬<marquee>標(biāo)簽,但是我我試了幾個(gè)插件之后都不滿(mǎn)意,因?yàn)槲乙獙?shí)現(xiàn)的僅僅是一個(gè)簡(jiǎn)單的輪播文字的功能,只不過(guò)輪播開(kāi)始的位置的是可以適當(dāng)調(diào)整的.我想到了可以借助css3中的transform、transition外加js就應(yīng)該可以實(shí)現(xiàn)類(lèi)似的效果。但是在做的過(guò)程中發(fā)現(xiàn)有的手機(jī)不支持transform使用百分比,而且transform屬性也會(huì)出現(xiàn)在手機(jī)上模糊的情況,于是就想到了使用position
成果
經(jīng)過(guò)一番努力,demo如下:
點(diǎn)我查看
html:
<div class="device">
<div class="navTitle marquee">
<div class="get-marquee-width">
<div class="marquee-move">
<!-- 這里的span 僅僅是為了獲得問(wèn)題內(nèi)容的長(zhǎng)度用的,也可以換成其他的行內(nèi)元素-->
<span>我是一個(gè)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)的標(biāo)題</span>
</div>
</div>
</div>
</div>
css:
/* 假設(shè).device的寬度是設(shè)備的寬度*/
.device{
width:320px;
}
.marquee{
position: relative;
width: 100%;
overflow: hidden;
height: 25px;
}
.marquee > .get-marquee-width{
position: relative;
}
.marquee> .get-marquee-width > .marquee-move{
-webkit-animation: marquee 20s linear 1s infinite;
-o-animation: marquee 20s linear 1s infinite;
animation: marquee 20s linear 1s infinite;
position: absolute;
width:100%;
padding-left: 50px;
white-space: nowrap;
}
@-webkit-keyframes marquee {
/*
*/
0% { left: 0; }
5%{left: 0;}
100% { left: -100%; }
}
@-moz-keyframes marquee {
0% { left: 0; }
5%{left: 0;}
100% { left: -100%; }
}
@-o-keyframes marquee {
0% { left: 0; }
5%{left: 0;}
100% { left: -100%; }
}
@keyframes marquee {
0% { left: 0; }
5%{left: 0;}
100% { left: -100%; }
}
js:
$(function(){
$(".marquee>div").width($("span").width());//js這里主要獲取到滾動(dòng)內(nèi)容的寬度就可以了
});
demo
PS:
- 之前主要是使用js去控制類(lèi)的切換,以及循環(huán),現(xiàn)在看起來(lái)就很蠢的辦法,現(xiàn)在主要是用了css的辦法,兼容性也更好一點(diǎn)
- 在css中有這樣的寫(xiě)法,
0% { left: 0; } 5%{left: 0;}這樣的寫(xiě)的目的是每次動(dòng)畫(huà)之前都有5%(1s)左右的延遲，雖然animation提供了animation-delay但是它只是在動(dòng)畫(huà)的第一次的時(shí)候起作用 - 測(cè)試過(guò)程中發(fā)現(xiàn),好像有的手機(jī)瀏覽器不支持在
@keyframes中from{left:50px}to{left:-100%}這樣的寫(xiě)法,兩個(gè)賦值的方式不同的話(huà)是不支持的,所以無(wú)奈只能讓left從0開(kāi)始了
opencode給我啟發(fā)的例子:
點(diǎn)我查看
