js文字跑马灯

最新推荐文章于 2024-04-03 17:12:15 发布

dbj1245

最新推荐文章于 2024-04-03 17:12:15 发布

阅读量159

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lidedong/p/9667512.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>

转载于:https://www.cnblogs.com/lidedong/p/9667512.html

dbj1245

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js文字跑马灯

实现文字跑马灯效果，主要控制scrollLeft.效果图如下代码如下<html><head><script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script><s...
复制链接

扫一扫