首页 > 代码库 > 备注(算还可以的特效吧)

备注(算还可以的特效吧)

效果就是这样 ---字体是慢慢出来的,跟打字机一样的

附上代码

<!doctype html><html><head>    <title>type write</title>    <style>        body {            background-color:lightcyan;        }        #code {            width:40%;            height:300px;            margin:50px auto;                                }        span {            font-family:Arial;            color:blue;            font-weight:bold;            font-size:30px;        }        .ch{            font-family:Arial;            color:red;                    }                </style>    </head><body>    <div id="code">        <span>Thank you for comforting me when Im sad</span>        <br />        <span class="ch">感谢你在我伤心时安慰我</span>        <br />        <span>Loving me when Im mad</span>        <br />        <span class="ch">当我生气时你护著我</span>        <br />        <span>Picking me up when Im down</span>        <br />        <span class="ch">当我沮丧时你拉拔我</span>        <br />        <span>Thank you for being my friend and being around</span>        <br />        <span class="ch">感谢你作我的朋友并且在我身旁</span>        <br />        <span>Teaching me the meaning of love</span>        <br />        <span class="ch">教导我爱的意义是什么</span>        <br />        <span>Encouraging me when I need a shove</span>        <br />        <span class="ch">当我需要动力时你鼓励我</span>        <br />        <span>But most of all thank you for</span>        <br />        <span class="ch">但我最想感谢你的是</span>        <br />        <span>Loving me for who I am</span>        <br />        <span class="ch">爱上像我这样的一个人</span>    </div>    <script>        function timer() {                        var code = document.getElementById("code"), num = 0;            var codes = code.innerHTML            var timer = setInterval(function () {                var current = codes.substr(num, 1)                if (current == "<") {                    /*找到左括号后,马上去找右括号.*/                    num = codes.indexOf(>, num)+1 ;    /*匹配右括号*/                }                else {                    num++;                }                                                code.innerHTML = codes.substring(0, num) + (num & 1 ? ‘‘ : _);                  if (num > codes.length) {                    clearInterval(timer);                }            }, 75)        }        timer();    </script>    </body></html>

 

PS:小小记录一下。。

  

备注(算还可以的特效吧)