有時候在頁面的某個模塊中，需要無限循環的滾動一些消息。那么如果我們用js實現無縫銜接滾動的思路是什么呢（比如我們這個模塊是向上滾動的）？
1.克隆A一份完全一樣的數據B放在原數據A的后面；
2.使用setInterval向上滾動A的父級容器；
3.當向上滾動的距離L正好的A的高度時(L==A.height())，L=0，重新開始滾動，無限循環。
克隆一份數據放在后面，是為了當A向上移動時，后面有數據能填補漏出來的空白。當B移動到可視區域的頂部時，此時A剛好移出可視區域，那么此時將容器重新歸0，用戶是沒有感知的，以為還是B中的第一條數據。然后繼續向上滾動。
1. 使用CSS3來實現
若要用CSS3的屬性實現的話，非animation莫屬，因為transition是需要手動的觸發，而且不能無限次執行下去，而animation恰好能解決這個問題。
假如數據是在寫死的情況下時，我們完全可以手動復制一份數據放在后面，然后把原數據的高度寫到css中，實現的思路與上面的一樣：
css樣式:
| @keyframes rowup { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -307px, 0); transform: translate3d(0, -307px, 0); display: none; }}.list{ width: 300px; border: 1px solid #999; margin: 20px auto; position: relative; height: 200px; overflow: hidden;}.list .rowup{ -webkit-animation: 10s rowup linear infinite normal; animation: 10s rowup linear infinite normal; position: relative;} |
html格式:
| <div class="list"> <div class="cc rowup"> <div class="item">1- 121233fffffr國家認可更健康進口價格困擾</div> <div class="item">2- 3123233</div> <div class="item">3- 個人口結構俄跨入國際科技館客人感覺</div> <div class="item">4- ggrgerg</div> <div class="item">5- fvdgdv</div> <div class="item">6- 德國南部巴士與卡車相撞起火 31人受傷11人死亡樸槿惠庭審時突然昏迷 支持者：她死了法官要負責！</div> <div class="item">7- 外交部再次回應印軍越界:要求立即將越界部隊撤回</div> <div class="item">8- 德國網紅致信默克爾</div> <div class="item">9- 國資委原</div> <div class="item">1- 121233fffffr國家認可更健康進口價格困擾</div> <div class="item">2- 3123233</div> <div class="item">3- 個人口結構俄跨入國際科技館客人感覺</div> <div class="item">4- ggrgerg</div> <div class="item">5- fvdgdv</div> <div class="item">6- 德國南部巴士與卡車相撞起火 31人受傷11人死亡樸槿惠庭審時突然昏迷 支持者：她死了法官要負責！</div> <div class="item">7- 外交部再次回應印軍越界:要求立即將越界部隊撤回</div> <div class="item">8- 德國網紅致信默克爾</div> <div class="item">9- 國資委原</div> </div></div> |
