公告文字水平滾動例項程式碼

antzone發表於2017-03-15

所謂公告水平滾動效果，說簡單點就是文字水平無縫滾動，在很多網站都有應用，比較常見的是在導航欄下面有這樣的一段滾動性的文字，下面將通過一段程式碼例項簡單介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0px;
  padding: 0px;
}
ul {
  list-style: none;
  width: 800px;
  height: 30px;
}
ul li {
  float: left;
  width: 340px;
  height: 30px;
  line-height: 30px;
  cursor:pointer;
}
#main {
  width: 170px;
  height: 30px;
  overflow: hidden;
  margin: 50px auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var speed=10;
  var flag=null;
  var omain=document.getElementById("main");
  var obox=document.getElementById("box");
  var oleft=document.getElementById("left");
  var oright=document.getElementById("right");

  oright.innerHTML=oleft.innerHTML;
  function theScroll(){
    if(omain.scrollLeft>=oleft.offsetWidth){
      omain.scrollLeft=0;
    }
    else{
      omain.scrollLeft++;
    }
  }
  var flag=setInterval(theScroll,speed);
  obox.onmouseover = function () {
    clearInterval(flag)
  }
  obox.onmouseout = function () {
    flag = setInterval(theScroll, speed);
  }
}
</script>
</head>
<body>
<div id="main">
  <ul id="box">
    <li id="left">螞蟻部落歡迎您，只有努力才會有美好的未來。</li>
    <li id="right"></li>
  </ul>
</div>
</body>
</html>

以上程式碼實現了文字水平無縫滾動效果，程式碼比較簡單這裡就不多介紹了，如有疑問可以跟帖留言。

相關文章