1. 程式人生 > 其它 >博學谷零基礎大資料就業班2021

博學谷零基礎大資料就業班2021

專案開發中若需要做系統公告,可在此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>