• 2022-09-04被罚款200元记6分.
  • 特么的.电脑风扇坏了.快递还全部停发.太难了...求求了.疫情赶紧走吧.
  • 难啊难!要钱难!
  • 更新到WordPress5.6啦
  • 有点伤心了,今年净遇到王某海这种人.
  • 难啊难...
  • 七牛的JS SDK 的文档真坑啊.
  • 蓝奏云分享部分地区无法访问需手动修改www.lanzous.com变为:www.lanzoux.com
  • 好气啊~原来使用的CDN服务商莫名其妙的给我服务取消了~
  • 遇见一个沙雕汽车人.

JavaScript - 有趣的打字机特效

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

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

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