哈洛

导航

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

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

附上代码

<!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 I'm sad</span>
        <br />
        <span class="ch">感谢你在我伤心时安慰我</span>
        <br />
        <span>Loving me when I'm mad</span>
        <br />
        <span class="ch">当我生气时你护著我</span>
        <br />
        <span>Picking me up when I'm 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:小小记录一下。。

  

posted on 2014-12-11 14:23  哈洛  阅读(177)  评论(0编辑  收藏  举报