js文字跑马灯

实现文字跑马灯效果，主要控制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>

 

posted @ 2018-09-18 10:35  李德东  阅读(3414)  评论(0)  编辑  收藏  举报