Js實(shí)現(xiàn)文字水平滾動(dòng)
現(xiàn)在要實(shí)現(xiàn)的效果是，當(dāng)一行文字超過(guò)頁(yè)面的寬度，需要實(shí)現(xiàn)循環(huán)輪播的效果。
我們需要實(shí)現(xiàn)無(wú)縫輪播，所以需要在DOM里面多添加一條，當(dāng)?shù)谝粭l內(nèi)容剛好結(jié)束的時(shí)候也就是第二條開始的時(shí)候，此時(shí)瞬間切換到第一條的開始位置。這樣就可以無(wú)縫銜接了。
"scroll-outer" class="scroll__outer"> <div id="scroll-inner" class="scroll__inner"> <div class="scroll__text">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字div> <div class="scroll__text" id="last-text">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字div> div></div>
樣式上我們需要注意，第一就是文字不能換行，第二就是兩行文字需要排列在一起。
<style> .scroll__outer { position: relative; flex: 1; overflow: hidden; color: #000; width: 100%; height: 36px; }
.scroll__inner { position: absolute; left: 0; top: 0; transform: translate3d(0, 0, 0); display: flex; flex-direction: row; }
.scroll__text { padding-right: 20px; white-space: nowrap; }style>
JS腳本通過(guò)獲取元素的寬度，然后判斷是否超出了頁(yè)面的寬度，如果超過(guò)就開啟一個(gè)定時(shí)器，然后每次間隔一段時(shí)間重新設(shè)置文字的偏移距離。
<script> const outer = document.getElementById('scroll-outer') const innter = document.getElementById('scroll-inner') const outerWidth = outer.getBoundingClientRect().width const innerWidth = innter.getBoundingClientRect().width const lastText = document.getElementById('last-text') const padding = 20 const middle = innerWidth / 2 let translate = 0 if (middle - padding > outerWidth) { setInterval(() => { translate = translate >= middle ? 2 : (translate + 2) innter.style.transform = `translate3d(${-translate}px, 0, 0)` }, 100) } else { lastText.style.display = 'none' }script>
評(píng)論
圖片
表情
<b id="afajh"><abbr id="afajh"></abbr></b>