有趣的打字机特效

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>I want to send you a letter</title>
</head>
<body>
<div id="autotype" style="margin-top:200px;text-align: center;font-family: 楷体;font-size: 20px;"></div><div id="l" style="text-align: center;color: #fff;"></div>
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script>
	l = document.getElementById('l');
	l.innerHTML='我爱你';
	$.fn.autotype = function (str, speed) {
    	div = document.getElementById('autotype');
    	div.style.color = '#000';
    	console.log('其实我爱你,但是我不敢说,怕你离开我.你也许根本就看不到....');
        var self = this,
                defaultStr = '我希望有个如你一般的人.<br><br>'
                          +'如山间清爽的风.<br><br>'
                          +'如古城温暖的光.<br><br>'
                          +'从清晨到夜晚.<br><br>'
                          +'由山野到书房.<br><br>'
                          +'只要最后是你,就好.<br><br>'
                          +'      -KIENG',//将要添加的元素的默认内容
                defaultSpeed = 100,
                str = str || defaultStr,
                speed = speed || defaultSpeed,
                index = 0,
                timer = setInterval(function () {
                    var current = str.substr(index, 1);
                    if (current == '<') {
                        index = str.indexOf('>', index) + 1;
                    } else {
                        index++;
                    }
                    self.html(str.substring(0, index) + ( (index & 1) && (index != str.length) ? '_|' : ''));
                    if (index >= str.length) {
                        clearInterval(timer);
                    }
                }, speed);
                
    };
    $("#autotype").autotype();
 //    window.onmouseenter=function(){
	// 	div = document.getElementById('autotype');
	// 	div.innerHTML='嗯,再见';
	
	// }
	
</script>
</body>
</html>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注