使用css3和js在手機上實現簡單的跑馬燈效果

狀況描述

客戶想在手機頂部的nav顯示單行文字時,在字數較多,一屏顯示不下的狀況下,文字能夠滾動起來.一開始,我是用的php作了一下字數的判斷,若是字數比10個多就添加一個<marquee>標籤,來製做這個滾動效果。 選取<marquee>標籤這樣的方法,主要是考慮到這樣是能兼容全部的平臺的絕大部分機型的。

這裏首先作一個檢討,這個問題是要考慮響應問題的,不是隨意規定字數;這個問題應該交給js處理而不是php.

接下來,當我覺得這樣就大功告成的時候,設計部的同事告訴我說,客戶要求,在文字能夠滾動的狀況,滾動文字 的開頭要從左端開始向右滾動。可是我在查閱資料後發現,<marquee>標籤只能從一端滾動到另外一端,不能 設定開始滾動的位置。

好吧,那我只能先踏上尋找解決方案的征程了~~~(偶也)

解決問題的過程

一開始我能想到的首先就是用js來模擬<marquee>標籤,可是我我試了幾個插件以後都不滿意,由於我要實現的僅僅是一個簡單的輪播文字的功能,只不過輪播開始的位置的是能夠適當調整的.我想到了能夠藉助css3中的transform、transition外加js就應該能夠實現相似的效果。可是在作的過程當中發現有的手機不支持transform使用百分比,並且transform屬性也會出如今手機上模糊的狀況,因而就想到了使用position

成果

通過一番努力,demo以下: 點我查看

html:

<div class="device">
<div class="navTitle marquee">
  <div class="get-marquee-width">
    <div class="marquee-move">
    <!-- 這裏的span 僅僅是爲了得到問題內容的長度用的,也能夠換成其餘的行內元素-->
     <span>我是一個很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的標題</span>
    </div>
  </div>
</div>
</div>

css:

/* 假設.device的寬度是設備的寬度*/
.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這裏主要獲取到滾動內容的寬度就能夠了
});

demo

PS:

• 以前主要是使用js去控制類的切換,以及循環,如今看起來就很蠢的辦法,如今主要是用了css的辦法,兼容性也更好一點
• 在css中有這樣的寫法,0% { left: 0; } 5%{left: 0;} 這樣的寫的目的是每次動畫以前都有5%(1s)左右的延遲，雖然animation提供了animation-delay可是它只是在動畫的第一次的時候起做用
• 測試過程當中發現,好像有的手機瀏覽器不支持在@keyframes中from{left:50px}to{left:-100%}這樣的寫法,兩個賦值的方式不一樣的話是不支持的,因此無奈只能讓left從0開始了

opencode給我啓發的例子: 點我查看