javascript實現文字跑馬燈效果
阿新 • • 發佈：2020-06-19
本文例項為大家分享了js實現文字跑馬燈效果的具體程式碼，供大家參考，具體內容如下
思路：
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();
}判斷滾動的結束根據滾動條到元素左邊的距離和文字的長度判斷，如果滾動條到元素左邊的距離等於文字的長度，則結束滾動。
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">實現文字的跑馬燈效果，超出容器的長度則開始向左滾動</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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。