# 收藏样式
# 手机弹窗预览内容
.form-pop{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
position: fixed;
z-index: 999;
display: none;
}
.form-pop-con{
width: 290px;
height: 590px;
background-image: url("/static/images/phone.png");
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.form-pop-con-con{
width: 255px;
height: 424px;
/*background-color: #0a001f;*/
position: absolute;
top: 97px;
left: 50%;
transform: translateX(-50%);
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
}
<button type="button" id="open-form-pop" class="layui-btn ">预览</button>
<div class="form-pop">
<div class="form-pop-con">
<div class="form-pop-con-con">
<p>
这里是手机里里面预览的内容
</p>
</div>
</div>
</div>
$('#open-form-pop').on('click',function () {
$('.form-pop').show();
});
$(document).on('click',function () {
$(".form-pop").hide();
});
$(".form-pop-con").on('click',function () {
event.stopPropagation();
});
$("#open-form-pop").on('click',function () {
event.stopPropagation();
});
# 打字机效果插件 Typed.js
# 介绍
打字机效果是非常酷的文字显示效果，视觉表现极佳，而通过Typed.js可以很简单的在web开发中实现打字机效果。
官网： JavaScript Animated Typing with Typed.jsmattboldt.com
# 安装
# 下载安装
# With NPM
npm install typed.js
# With Yarn
yarn add typed.js
# With Bower
bower install typed.js
# 使用 CDN
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
# 使用
# HTML部分
<span id="typed" style="white-space: pre-wrap;line-height: 30px;"></span>
经过测试文字放在span标签里面，输入的光标才会正常显示。
# JavaScript部分
const options = {
strings: [
'First test.',
'Second test, \nit will pause for three seconds. ^3000',
"Second test, \nthe last sentence will go back to 'Second test, ', \noh no, this is the third test. ^1000",
"It's going to start repeating.",
],
typeSpeed: 50, // 打印速度
startDelay: 300, // 开始之前的延迟300毫秒
loop: true, // 是否循环
};
const typed = new Typed('#typed', options);
# 效果
# 更多参数
该插件可以配置很多参数，具体的参数可以参考官方文档，或者参考下面的文章：
【前端库】typed.js打字机效果_老程-CSDN博客blog.csdn.net
# vue中的使用
该插件对vue做了一次封装：
# 安装
npm install --save vue-typed-js
# 使用
非常简单，按照文档一步一步集成就可以了。
注意：vue-typed-js没有声明文件，所以在TypeScript中使用会报错，而Typed.js是有声明文件的，可以直接在TypeScript中使用。
# 总结
总而言之使用Typed.js实现打字机效果非常的简单，简单到不需要用太多语言去进行描述。