文字滚动

2019-11-06 09:07:32

字体：大中小

来源：转载

供稿：网友

前几天做了一个抽奖的小demo，那个是纵向滚动的，今天就试了一下横轴的滚动，简单的做了一个文字滚动，跟大街上的led显示灯差不多的。刚开始做的一行文字滚动完重新滚动，这样就造成了会有一段时间屏幕是没有文字的，就想了一个简单的方式让前面消失的字在屏幕右边跟着出现。这里写图片描述原理很简单，就是写了两句重复的话，控制好间距，当第二句话的开头的字“这”出现时，设置margin-left到一开始的状态，就可以无限滚动了。

<html><head> <title></title></head><body> <div style="background-color: rebeccapurple;width:200px;height:50px;border:1px solid black;overflow:hidden"> <p style="color: white;width: 202px;margin-left: -1px;text-align: center;white-space:nowrap;">这是一个滚动的段落            这是一个滚动的段落</p> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/Javascript"> $(document).ready(function(){ setInterval(function(){ $("p").animate({ marginLeft:"-=1" },50,function(){ var s = Math.abs(parseInt($(this).CSS("margin-left"))); if(s>=200){ $(this).css("margin-left","0px"); console.log(s) } }); }); }); </script></body></html>

上一篇：503. Next Greater Element II+I:MAP+STACK

下一篇：Qt发布（三）------webkit模块的裁剪