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 实现文字上下跑马灯 VUE之文字跑马灯效果 VUE 文字跑马灯（文本滚动） js无缝滚动跑马灯 js实现横向跑马灯效果文字跑马灯（无缝衔接） CSS+JS完美实现 css 跑马灯 Unity3D 文字滚动跑马灯效果 JavaScript小实例-文字跑马灯效果 Vue实现跑马灯轮播文字效果