JS实现跑马灯效果(鼠标滑入可暂停,离开继续跑)
<!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 green; white-space: nowrap; overflow: hidden; padding: 10px; color: rgb(110, 244, 216); background: #1c1c51; } #wrap div { display: inline-block; font-size: 20px; } #wrap span { font-size: 20px; color: red; } </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>
万人中央,我孤独的漂亮。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步