JavaScript实现文字跑马灯效果
作者:互联网
项目开发中若需要做系统公告,可在此Demo的基础上稍加修改实现一个简单的系统公告效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字跑马灯</title> <style> #race_notice_p{ position:relative; margin:20px auto; width:800px; overflow:hidden; height:50px; } #race_notice_s{ position:absolute; left:0; top:0; } #race_notice_s p span{ margin:0 20px; line-height: 50px; } </style> </head> <body> <div id='race_notice_p' > <div id='race_notice_s'> <p> <span>本文主要分享了原生JS实现跑马灯效果的示例代码。看,这就是跑马灯效果</span> </p> </div> </div> </body> <script> window.onload=function(){ function move(){ var speed = -5; var race_notice_p = document.getElementById('race_notice_p'); var race_notice_s = document.getElementById('race_notice_s'); var p = race_notice_s.getElementsByTagName('p')[0]; var length = p.offsetWidth; p.innerHTML +=p.innerHTML; function move_do(){ if(race_notice_s.offsetLeft < - length){ race_notice_s.style.left=0; } race_notice_s.style.left = race_notice_s.offsetLeft + speed +'px'; } setInterval(move_do,200); } move(); } </script> </html>
标签:文字,function,notice,move,JavaScript,跑马灯,race,var 来源: https://www.cnblogs.com/wxf1314/p/15225862.html