javascript實(shí)現(xiàn)文字跑馬燈效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)文字跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下
思路：
1.判斷文字的長(zhǎng)度和容器的長(zhǎng)度，如果文字長(zhǎng)度大于容器長(zhǎng)度，則開(kāi)始滾動(dòng)，否則不滾動(dòng)。
2.獲取滾動(dòng)條到元素左邊的距離,遞歸滾動(dòng),直到滾動(dòng)后的距離等于文字的長(zhǎng)度退出遞歸。
判斷文字和容器的長(zhǎng)度可以通過(guò)offsetWidth來(lái)判斷。如果文字長(zhǎng)度大于容器長(zhǎng)度，則開(kāi)始滾動(dòng)。
window.onload = function(){ //比較文字與盒子長(zhǎng)度的大小 if(boxWidth>textWidth){return false; } content.innerHTML += content.innerHTML; document.querySelector(’.text’).classList.add(’padding’); //刷新textwidth textWidth = document.querySelector(’.text’).offsetWidth; scroll_left(); }
判斷滾動(dòng)的結(jié)束根據(jù)滾動(dòng)條到元素左邊的距離和文字的長(zhǎng)度判斷，如果滾動(dòng)條到元素左邊的距離等于文字的長(zhǎng)度，則結(jié)束滾動(dòng)。
function scroll_left(){ if(textWidth>boxWidth){ //文字長(zhǎng)度大于盒子長(zhǎng)度，開(kāi)始滾動(dòng) 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'>實(shí)現(xiàn)文字的跑馬燈效果，超出容器的長(zhǎng)度則開(kāi)始向左滾動(dòng)</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(){ //比較文字與盒子長(zhǎng)度的大小 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){ //文字長(zhǎng)度大于盒子長(zhǎng)度，開(kāi)始滾動(dòng) box.scrollLeft++; setTimeout(’scroll_left()’,1); } } </script></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. PHP驗(yàn)證碼工具－Securimage2. Vue 實(shí)現(xiàn)對(duì)quill-editor組件中的工具欄添加title3. JavaScript實(shí)現(xiàn)簡(jiǎn)單的彈窗效果4. 我所理解的JavaScript中的this指向5. javascript實(shí)現(xiàn)貪吃蛇小練習(xí)6. PHP利用curl發(fā)送HTTP請(qǐng)求的實(shí)例代碼7. Java commons-httpclient如果實(shí)現(xiàn)get及post請(qǐng)求8. PHP單件模式和命令鏈模式的基礎(chǔ)知識(shí)9. 一文帶你徹底理解Java序列化和反序列化10. js實(shí)現(xiàn)碰撞檢測(cè)
網(wǎng)公網(wǎng)安備