js文字跑馬燈

本文轉載自查看原文 2018-09-18 10:35 1676 前端/ js/ html

實現文字跑馬燈效果，主要控制scrollLeft.

效果圖如下

代碼如下

<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
var position=$("div").scrollLeft();
var t;
var flag=true;
$(document).ready(function(){
  $("button").click(function(){
      if(flag){
        position=0;
        fun();
        $(".btn1").text("重置跑馬燈");
      }else{
        $(".btn1").text("開始跑馬燈")
        clearTimeout(t); 
        $("div").scrollLeft(0);
      }
      flag=!flag;
      
  });
});
function fun(){
    if(position>400){
        position=0;
    }
    $("div").scrollLeft(position++);
    t=setTimeout("fun()",30);
}
</script>
</head>
<body>
<div id="testDiv" style="width:300px;overflow:hidden;white-space:nowrap;position:relative;">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div>
<button class="btn1">開始跑馬燈</button>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用 JS 實現文字上下跑馬燈 JS 無縫跑馬燈 js抽獎，跑馬燈 JavaScript實現文字跑馬燈 vue文字跑馬燈效果 CSS文字的跑馬燈特效 Vue實現文字跑馬燈效果 VUE之文字跑馬燈效果 VUE 文字跑馬燈（文本滾動） js簡單跑馬燈案例