• 快走了…不算今天出除去周日还有5天!\(^o^)/
  • 还有半个月就走了…挺好的.
  • 无聊啊,最近也没啥更新的.
  • 妈的,写之前不说,写完了了你说不行.中途我还问你你说对.你真是中国第一Monkey
  • 沃妮马,过的真快!转眼又上班了.等待十月一.
  • 还有1天就是端午节了.过的真快, 在这个公司工作半年啦..
  • 咦~哪个弟弟CC我呢?
  • 简单,简单.我提个思路.
  • 不算今天还有2天就放假了.
  • 一切随缘,随波逐流.

JavaScript – 有趣的打字机特效

WEB前端 KIENG 1年前 (2018-09-18) 76633次浏览 已收录 0个吐槽 扫描二维码

基于 jquery 制作的

运行截图;

JavaScript - 有趣的打字机特效

代码如下:

<!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 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权
转载请注明原文链接:JavaScript – 有趣的打字机特效
本文章链接:https://blog.kieng.cn/177.html
喜欢 (0)
KIENG
关于作者:
一个热衷网络的Man
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 快速获取昵称
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址