js實現的單行文字不間斷無縫滾動效果

antzone發表於2017-04-17
JS

本章節介紹一下如何利用原生javascript實現但行文字的不簡單無縫滾動效果。

這種效果在大量的網站都有使用，站點的公告或者其他功能一般會採用這種形式，下面就通過程式碼例項簡單介紹一下。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
#scrollobj{
  white-space:nowrap;
  overflow:hidden;
  width:200px;
  margin:50px;
}
</style>
<script type="text/javascript">
function scroll(obj){
  var tmp=(obj.scrollLeft)++;
  if(obj.scrollLeft==tmp){
    obj.innerHTML += obj.innerHTML;
  }
  if(obj.scrollLeft>=obj.firstChild.offsetWidth){
    obj.scrollLeft=0;
  }
}
setInterval("scroll(document.getElementById('scrollobj'))",20);
</script>
</head>
<body>
<div id="scrollobj">螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來。</div>
</body>
</html>

相關文章