我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>跑马灯效果</title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 16px; } #wrap { width: 1000px; margin: 20px auto; border: 2px solid #51C9F1; white-space: nowrap; overflow: hidden; padding: 10px; color: gold; background: mediumpurple; } #wrap div { display: inline-block; font-size: 20px; } #wrap span { font-size: 20px; color: yellow; } </style> </head> <body> <div id="wrap"> <div id="first"> <span>华晨宇</span>—— 没有人规定,一定要在什么年龄干什么事情,只要你想,随时都可以,不用太在意别人的看法! </div> <div id="last"> <span>华晨宇</span>—— 就是我为什么说孤独的人是强大的,孤独的人是不会去在意外面的世界的。 就是你自己想的什么东西,就直接说。 但是我还是一个前提,就是你说出来的东西一定要是建立 在一个善良的基础上的。说什么的时候你可以去想一想,这句话说完之后会不会伤害到他。但如果 你觉得说完这句话是在帮助这个人,你可以说。如果你只是凭自己的意气用事,就觉得我现在很不爽, 我说出来了。但是说完这句话是纯只是伤害他的话,其实你跟他们就没区别了。 </div> </div> <script type="text/javascript"> (function () { var wrap = document.getElementById('wrap'), first = document.getElementById('first'); //获取标签 var timer = window.setInterval(move, 5); wrap.onmouseover = function () { window.clearInterval(timer); }; wrap.onmouseout = function () { timer = window.setInterval(move, 5); }; function move() { wrap.scrollLeft++; if (wrap.scrollLeft >= first.scrollWidth) { wrap.scrollLeft = 0; } } })(); </script> </body> </html>