跑马灯效果 - Newbie_小白

跑马灯效果

html：

<!DOCTYPE html>
<html>

   <head>
      <meta charset="UTF-8">
      <title>跑马灯</title>
      <style type="text/css">
         body {
            background: #FFF;
         }
         
         input {
            background: transparent;
            border: none;
            color: #ff4332;
            font-size: 45px;
            font-weight: bold;
            font-family: "微软雅黑";
         }
      </style>
      <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
      <script type="text/javascript">
         var msg = "品味中原文化,寄情黄河风景,空谷寻香觅幽兰，驾着蜗牛追导弹";
//       移动的文字
         var interval = 400;
//       移动的速度
         var seq = 0;

         function LenScroll() {
            document.nextForm.lenText.value = msg.substring(seq, msg.length) + " " + msg;
            seq++;
            if (seq > msg.length)
               seq = 0;
               
//          msg.substring(seq, msg.length)这句就是 截取 msg字符变量,从0到seq+1 个位置 的字符 。
//          如果seq=0的话 截取字符就是H。seq++ 就是为了 能把msg整个这截取完。也就是为了实现走马灯效果
            window.setTimeout("LenScroll();", interval);
         }
      </script>

   </head>

   <body onload="LenScroll()">
      <center>
         <form name="nextForm">
            <input type="text" name="lenText" />
         </form>
      </center>

   </body>

</html>


result（文字循环播放）：

posted on 2016-05-01 19:13 Newbie_小白阅读(655) 评论(0) 收藏举报