javascript實(shí)現(xiàn)文字跑馬燈效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)文字跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下
思路：
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(); }
判斷滾動的結(jié)束根據(jù)滾動條到元素左邊的距離和文字的長度判斷，如果滾動條到元素左邊的距離等于文字的長度，則結(jié)束滾動。
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'>實(shí)現(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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. HTTP協(xié)議常用的請求頭和響應(yīng)頭響應(yīng)詳解說明（學(xué)習(xí)）2. IntelliJ IDEA創(chuàng)建web項(xiàng)目的方法3. Django如何繼承AbstractUser擴(kuò)展字段4. Python寫捕魚達(dá)人的游戲?qū)崿F(xiàn)5. 存儲于xml中需要的HTML轉(zhuǎn)義代碼6. Android studio 解決logcat無過濾工具欄的操作7. Django REST Swagger實(shí)現(xiàn)指定api參數(shù)8. ASP.NET MVC通過勾選checkbox更改select的內(nèi)容9. ASP中實(shí)現(xiàn)字符部位類似.NET里String對象的PadLeft和PadRight函數(shù)10. django創(chuàng)建css文件夾的具體方法
網(wǎng)公網(wǎng)安備