1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <title>Document</title>
    5.     <meta charset="utf-8" />
    6.     <style type="text/css">
    7.       *,body{
    8.         margin:0;
    9.         padding:0;
    10.       }
    11.      #view{
    13.       width:500px;
    14.       height:400px;
    15.       background-color:#000;
    16.       overflow:hidden;
    17.      }
    18.      #view_box{
    19.        width:500px;
    20.       height:400px;
    21.       background-color:#ddd;
    22.       background:url("res/htmlLX/lianxi1.jpg");
    24.      }
    25.      #cont{
    26.       color:#fff;
    27.       width:496px;
    28.       height:50px;
    29.       line-height:50px;
    30.       position:relative;
    31.       border:2px solid #191970;
    32.       top:50px;
    33.       font-size:20px;
    34.       font-weight:bold;
    35.      }
    36.      #content{
    37.        display:block;
    38.        position:relative;
    39.        top:0;
    40.      }
    41.       .btn{
    42.         width:60px;
    43.         height:30px;
    44.         cursor:pointer;
    45.       }
    46.     </style>
    48.   </head>
    49.   <body >
    50.     <div id="view">
    51.       <div id="view_box">
    52.         <div id="cont">
    53.           <span id="content">文字横向移动效果，简单漂亮！！！</span>
    54.         </div>
    55.       </div>
    57.     </div>
    59.     <script type="text/javascript">
    60.       var left = 0;// content的左边距
    61.       function move(){
    62.         // 补全代码，使文字向右移动
    63.         left += 2;
    64.         if(left>500){
    65.             left = -300;
    66.         }
    67.         document.getElementById("content").style.left = left+"px";
    68.         window.requestAnimationFrame(move);
    69.       }
    70.       move();
    71.     </script>
    72.   </body>
    73. </html>

    2021-09-26_163114.jpg2021-09-26_163124.jpg