傳統的走馬燈/輪播實現 無非是通過settimeout來設定偏移量而已，但是這種方式非常的損耗效能，可能 一般人沒有太大感覺，像我現在處理的走馬燈資料最少有上千條，300條資料在頁面展示就要10萬多px了，ie頁面直接卡死(chrome不會)。所以前端我就通過分塊和js控制cssrule來動態實現。**如下：
for (let i = 0, len = ss.length; i < len; ++i)
}}
上面我說過我需要處理的資料量太多，後台傳給我的資料至少上千條，如果將這上千條資料直接展示在前端，頁面直接卡死（chrome 2000多條資料的時候還ok，但6000的時候就卡了，ie更不用說，我300條資料就已經卡了），我測試過300條資料的時候需要設定100%時的left值達到100000以上，所以我前端採取了分塊方式呈現，每50條資料乙個塊，上乙個塊動畫載入完成才可以實現下乙個塊的動畫，所以我這裡的animatename是動態的，每個塊迴圈次數都只是一次。因為這個原因我可能要新增多個cssrule來實現 ，但我不是我想要的，所以我就新增了clearanimate來刪除上乙個塊的cssrule，保證一條cssrule就可以實現我上千個塊(甚至更多)的動畫，**如下
/**
* 計算lamplist的width
** @param w1 走馬燈寬度
* @param animatenum 動畫編號
*/lampstyle(w1, animatenum) }}
}let token = window.webkitcsskeyframesrule ? "-webkit-" : "";
!animatenum && (animatenum = 1);
if (!parentsheet) else
if (parentsheet) ', index);
cssrule = parentsheet.cssrules[index];
cssrule.cssrules[0].style.left = screen + 'px';
cssrule.cssrules[1].style.left = w;
}let div = document.getelementbyid('lampcontent');
div.style.animation = div.style.webkitanimation = this.animatename + ' ' + duration + ' linear 1'; // infinite
},
文字走馬燈效果
文字走馬燈效果 最近碰到的問題，由於label的size固定，而label.caption太長，無法完整顯示出來，要求實現文字走馬燈效果，依次顯示出完整的內容。文字走馬燈效果有幾種方法 1 通過移動label.left值實現，但label會移動。不符合要求 2 不斷複製lable.caption來實...
progressBar走馬燈設定
初始值visible false 讓progressbar1出現時 progressbar1.visible true progressbar1.style progressbarstyle.marquee 走馬燈 讓它消失時 progressbar1.visible false progressb...
vue Element UI走馬燈元件重寫
1 element ui走馬燈元件 carousel 分析一波源 carousel src main.vue 檔案為 el carousel檔案主要功能 carousel src item.vue 檔案為 el carousel item 功能 2 carousel src main.vue檔案詳解...