javascript實現(xiàn)文字跑馬燈效果
本文實例為大家分享了js實現(xiàn)文字跑馬燈效果的具體代碼，供大家參考，具體內容如下
思路：
1.判斷文字的長度和容器的長度，如果文字長度大于容器長度，則開始滾動，否則不滾動。
2.獲取滾動條到元素左邊的距離,遞歸滾動,直到滾動后的距離等于文字的長度退出遞歸。
判斷文字和容器的長度可以通過offsetWidth來判斷。如果文字長度大于容器長度，則開始滾動。
window.onload = function(){ //比較文字與盒子長度的大小 if(boxWidth>textWidth){return false; } content.innerHTML += content.innerHTML; document.querySelector(’.text’).classList.add(’padding’); //刷新textwidth textWidth = document.querySelector(’.text’).offsetWidth; scroll_left(); }
判斷滾動的結束根據(jù)滾動條到元素左邊的距離和文字的長度判斷，如果滾動條到元素左邊的距離等于文字的長度，則結束滾動。
function scroll_left(){ if(textWidth>boxWidth){ //文字長度大于盒子長度，開始滾動 box.scrollLeft++; setTimeout(’scroll_left()’,1); }}
完整代碼如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> *{ margin: auto; padding: 0; } .box{ margin-top: 150px; margin-left: 150px; color: red; white-space: nowrap; width: 200px; background: rosybrown; overflow: hidden; } .content p{ display: inline-block; } .content p.padding{ padding-right: 200px; } </style> </head><body> <div class='box'> <div class='content'> <p class='text'>實現(xiàn)文字的跑馬燈效果，超出容器的長度則開始向左滾動</p> </div> </div> <script> let box = document.querySelector(’.box’); let content = document.querySelector(’.content’); let text = document.querySelector(’.text’); //文本寬度 let textWidth = text.offsetWidth; //盒子寬度 let boxWidth = text.offsetWidth; window.onload = function(){ //比較文字與盒子長度的大小 if(boxWidth>textWidth){return false; } content.innerHTML += content.innerHTML; document.querySelector(’.text’).classList.add(’padding’); //刷新textwidth textWidth = document.querySelector(’.text’).offsetWidth; scroll_left(); } function scroll_left(){ if(textWidth>boxWidth){ //文字長度大于盒子長度，開始滾動 box.scrollLeft++; setTimeout(’scroll_left()’,1); } } </script></body></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關文章：
1. JavaEE SpringMyBatis是什么? 它和Hibernate的區(qū)別及如何配置MyBatis2. Python 忽略文件名編碼的方法3. Java Media Framework 基礎教程4. android studio實現(xiàn)簡單的計算器（無bug）5. 解決vue頁面刷新，數(shù)據(jù)丟失的問題6. python 讀txt文件,按‘,’分割每行數(shù)據(jù)操作7. 在Mac中配置Python虛擬環(huán)境過程解析8. 利用單元測試對PHP代碼進行檢查9. python excel和yaml文件的讀取封裝10. python如何實現(xiàn)word批量轉HTML
網(wǎng)公網(wǎng)安備