直接上代码
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟打字效果</title>
<script src="./jquery-2.2.4.js"></script>
<style>
div.container { position: relative; width: 60%; margin: auto; height: 900px; background-image: url('http://t1.niutuku.com/960/24/24-617747.jpg'); background-size: 100% auto; background-repeat: no-repeat; }
div.text-box { position: absolute; width: 80%; height: 75%; left: 10%; top: 10%; }
div.text-box .write-h1 {text-align: center; font-family: '宋体';}
div.text-box p {text-indent: 2em; line-height: 2em;}
div.text-box .write-signature {width: 10em; margin-left: 70%;}
div.container span.cursor { border-bottom: 2px solid #333; animation: twinkle 1s infinite ;}
@keyframes twinkle {
from { border-color: #333; }
50% { border-color: #333; }
50.01% { border-color: transparent; }
to { border-color: transparent; }
}
</style>
<script src="./write.js"></script>
</head>
<body>
<div class="container">
<div class="text-box"></div>
<!-- 打字声音频 -->
<audio loop>
<source src="./6865.wav" type="audio/ogg">
<source src="./6865.wav" type="audio/mpeg">
</audio>
</div>
<script>
var text = '我听见雨滴落在青青草地，我听见远方下课钟声响起，可是我没有听见你的声音，认真呼唤我姓名。\n爱上你的时候还不懂感情，离别了才觉得刻骨铭心，为什么没有发现遇见了你，是生命最好的事情。也许当时忙着微笑和哭泣，忙着追逐天空中的流星。\n人理所当然的忘记，是谁风里雨里一直默默守护在原地。\n原来你是我最想留住的幸运，原来我们和爱情曾经靠得那么近，那为我对抗世界的决定，那陪我淋的雨，一幕幕都是你，一尘不染的真心。\n与你相遇好幸运，可我已失去为你泪流满面的权利，但愿在我看不到的天际，你张开了双翼，遇见你的注定 (oh--)，她会有多幸运。\n青春是段跌跌撞撞的旅行，拥有着后知后觉的美丽，来不及感谢是你给我勇气，让我能做回我自己，也许当时忙着微笑和哭泣，忙着追逐天空中的流星，人理所当然的忘记，是谁风里雨里一直默默守护在原地。\n原来你是我最想留住的幸运，原来我们和爱情曾经靠得那么近，那为我对抗世界的决定，那陪我淋的雨，一幕幕都是你，一尘不染的真心，与你相遇好幸运，可我已失去为你泪流满面的权利，但愿在我看不到的天际，你张开了双翼，遇见你的注定 (oh--)，她会有多幸运。'
var xxyObj = {
title: '小幸运',
box: '.text-box',
signature: '田馥甄',
text: text
}
var xiaoxingyun = new WRITE(xxyObj)
</script>
</body>
</html>
write.js:
/**
* boxClass: 放置容器class
* textArray：文本数组
* title: 文章标题
* signature: 署名
* text: 文本
* textArray: 文本截取的数组
* isEnd: 是否结束
* paragraphLength：段落长度
* paragraphIndex：当前所在段落
* textLength：当前文本长度
* textIndex：当前所在文本的位置
*/
// 创建书写文章构造函数
function WRITE (obj) {
this.boxClass = obj.box
this.title = obj.title || null
this.signature = obj.signature || null
this.text = obj.text || 'Hello World!'
this.textArray = this.text.split('\n')
this.paragraphLength = this.textArray.length
this.paragraphIndex = 0
this.textLength = this.textArray[this.paragraphIndex].length
this.textIndex = 0
this.isEnd = false
var _this = this
if(this.title && this.title != '') {
this.newTitle()
}else{
this.newParagraph()
}
}
// 标题方法
WRITE.prototype.newTitle = function () {
var h = '<h1 class="write-h1"><span class="cursor"> </span></h1>'
$(this.boxClass).append(h)
var timer = window.setTimeout(function(){
this.addText(this.title)
}.bind(this),3000)
}
// 段落方法
WRITE.prototype.newParagraph = function () {
var p = '<p class="write-p" data-index="' + this.paragraphIndex + '"><span class="cursor"> </span></p>'
$(this.boxClass).append(p)
var timer = window.setTimeout(function(){
this.addParagraph()
}.bind(this),3000)
}
// 署名方法
WRITE.prototype.newSignature = function () {
if(this.isEnd === false){
var p = '<p class="write-signature">—— <span class="cursor"> </span></p>'
$(this.boxClass).append(p)
var timer = window.setTimeout(function(){
this.addText(this.signature)
this.isEnd = true
}.bind(this),3000)
}
}
// 添加段落内容
WRITE.prototype.addParagraph = function () {
if (this.textArray[this.paragraphIndex]) {
this.addText(this.textArray[this.paragraphIndex])
}else if(this.signature){
$('.cursor').remove()
this.newSignature()
}
}
// 添加文本内容
WRITE.prototype.addText = function (text) {
if (text && text.length > 0) {
var _this = this
var $cursor = $('.cursor')
var length = text.length
var timer2 = null
var audio = $('audio')[0]
var timer = window.setInterval( function () {
if(_this.textIndex < length && (text[_this.textIndex] == ',' || text[_this.textIndex] == '，' || text[_this.textIndex] == '.') || text[_this.textIndex] == '。'){
audio.pause()
clearInterval(timer)
timer = null
$cursor.before(text[_this.textIndex])
_this.textIndex++
timer2 = setTimeout(function(){
_this.addText(text)
},1300)
}else if(_this.textIndex < length){
audio.play()
$cursor.before(text[_this.textIndex])
_this.textIndex++
}else{
audio.pause()
clearInterval(timer)
timer = null
_this.paragraphIndex++
_this.textIndex = 0
$cursor.remove()
_this.newParagraph()
}
}, 150)
} else {
}
}
- demo 使用jq只是图个方便，大部分是原生js的内容
- 没有做浏览器兼容处理，部分浏览器可能会无法发出声音
- 打字声音频可以网上现在一个
效果
打字.gif
