基于 jquery 制作的
运行截图;
代码如下:
<!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>
KIENG.CN , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权
转载请注明出处：JavaScript - 有趣的打字机特效
本文章链接：https://blog.kieng.cn/177.html
转载请注明出处：JavaScript - 有趣的打字机特效
本文章链接：https://blog.kieng.cn/177.html
