純css3跑馬燈demo

標籤：osi   oop   hid   位置   配置   orm   基本   center   css   

我們寫跑馬燈一般都是用js控制定時器不斷迴圈產生，但是定時器消耗比較大，特別是程式中很多用到定時器的時候，感覺有的時候比較卡。但是css3樣式一般不會。這裡主要的思路就是用css3代替js定時器實現一個簡單的跑馬燈。 1、基本思路     這次demo主要是通過css3中的animation動畫實現，藉助transform中的translateY屬性的增減實現dom位置的變化，讓它跑起來。

---------------------------html----------------------------<div class="marquee">    <div>        <p>讓我掉下眼淚的 不止昨夜的酒</p>        <p>讓我依依不捨的 不止你的溫柔</p>        <p>餘路還要走多久 你攥著我的手</p>        <p>讓我感到為難的 是掙紮的自由</p>        <p>分別總是在九月 回憶是思念的愁</p>        <p>深秋嫩綠的垂柳 親吻著我額頭</p>        <p>在那座陰雨的小城裡 我從未忘記你</p>        <p>成都 帶不走的 只有你</p>        <p>和我在成都的街頭走一走</p>        <p>直到所有的燈都熄滅了也不停留</p>        <p>你會挽著我的衣袖 我會把手揣進褲兜</p>        <p>走到鬰林路的盡頭 坐在(走過)小酒館的門口</p>        <p>我是最後一個</p>    </div></div>----------------------------css-----------------------------.marquee div {    display: block;    width: 100%;    text-align: center;    position: absolute;    overflow: hidden;    -webkit-animation: marquee 15s linear infinite;    animation: marquee 15s linear infinite;}@keyframes marquee {    0% {        transform: translateY(0);    }    100% {        transform: translateY(-650px); // 每行高50    }}

 

     這段代碼比較容易理解，就是在進度0的時候位移為0，進度100%的時候位移100%。根據css3動畫原理，在100%的時候無限迴圈狀態下，動畫會自動重疊到進度0的狀態，進而實現迴圈動畫。     但是通過實際觀察可以發現，過渡效果很不好，100%-0%的時候會出現閃跳的狀態，為此我們將0%以及100%狀態下的位置重新計算，並在進度0前面添加一個末位項，如下

---------------------------html----------------------------<div class="marquee">    <div>        <p class="label_txt">我是最後一個</p>                <p>讓我掉下眼淚的 不止昨夜的酒</p>        <p>讓我依依不捨的 不止你的溫柔</p>        <p>餘路還要走多久 你攥著我的手</p>        <p>讓我感到為難的 是掙紮的自由</p>        <p>分別總是在九月 回憶是思念的愁</p>        <p>深秋嫩綠的垂柳 親吻著我額頭</p>        <p>在那座陰雨的小城裡 我從未忘記你</p>        <p>成都 帶不走的 只有你</p>        <p>和我在成都的街頭走一走</p>        <p>直到所有的燈都熄滅了也不停留</p>        <p>你會挽著我的衣袖 我會把手揣進褲兜</p>        <p>走到鬰林路的盡頭 坐在(走過)小酒館的門口</p>        <p class="label_txt">我是最後一個</p>    </div></div>----------------------------css-----------------------------.marquee div {    display: block;    width: 100%;    text-align: center;    position: absolute;    overflow: hidden;    -webkit-animation: marquee 15s linear infinite;    animation: marquee 15s linear infinite;}@keyframes marquee {    0% {        transform: translateY(-25);    }    100% {        transform: translateY(-675px); // 每行高50    }}

     實際觀察可以發現，這樣效果就好很多。原理的根本就是讓閃跳的前一幀和後一幀的位置重合，而此時下一條文本還沒有完全露出，視覺上基本

達到無縫串連狀態。如果容器內會同時出現兩條或以上常值內容時，可以在class="label_txt"位置再添加首尾項，實現動畫的連結。綜上我們就實現了完全由css3達成的跑馬燈效果。------------------------------------分割線------------------------------------------     雖然我們達到了這個目的，但是代碼中還有不少問題。由於css3無法擷取dom節點數量，因此100%進度時的位移量只能寫死。

• less在部分外掛程式中可以實現擷取dom相關內容，但是還是需要引入js，本質上還是通過js擷取dom數量
• 另一種思路就是保留固定長度，通過js填充或打亂重選保證dom數量。比如我們設定一個的位移量等於14個dom節點的高度，在配置內容不足時，通過js迴圈一下補充到14個。而一旦大於就只能刪除一部分了或者隨機填充。

-----------------------------------峰迴路轉分割線----------------------------------js可以直接操作keyframe內部的屬性！！！！666，這樣的話就簡單啦。頁面初始化的時候轉載出自http://bbs.csdn.net/topics/391898522 >>>3樓

var cssRule; // Returns a reference to the specified CSS rule(s). function getRule() {  var rule;  var ss = document.styleSheets;  for (var i = 0; i < ss.length; ++i) {      // loop through all the rules!      for (var x = 0; x < ss[i].cssRules.length; ++x) {          rule = ss[i].cssRules[x];          if (rule.name == "marquee" && rule.type == CSSRule.KEYFRAMES_RULE) {              cssRule = rule;          }      }  }} cssRule.deleteRule("0");cssRule.deleteRule("1");cssRule.appendRule("0% { transform: translateY(-150px); opacity: 0; }");cssRule.appendRule("100% { transform: translateY(0px); opacity: 1; }"); 

     通過cssRule對象更新不同進度的狀態即可。但值得注意的是僅僅是刪除的時候動畫效果並不會改變，要在添加上替換的才會其效果哦~~-----------------------------------end----------------------------------     後面我們再換種方式，用requestAnimationFrame來試試~~

純css3跑馬燈demo