zoukankan      html  css  js  c++  java
  • 跑马灯效果

    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(
    文字循环播放):


  • 相关阅读:
    Linux
    Other
    Linux
    VIM
    Linux
    其他
    Win10
    Win10
    IDE
    其他
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5450972.html
Copyright © 2011-2022 走看看