直接上代碼
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愛上你的時候還不懂感情，離別了才覺得刻骨銘心，為什么沒有發(fā)現(xiàn)遇見了你，是生命最好的事情。也許當時忙著微笑和哭泣，忙著追逐天空中的流星。\n人理所當然的忘記，是誰風里雨里一直默默守護在原地。\n原來你是我最想留住的幸運，原來我們和愛情曾經(jīng)靠得那么近，那為我對抗世界的決定，那陪我淋的雨，一幕幕都是你，一塵不染的真心。\n與你相遇好幸運，可我已失去為你淚流滿面的權利，但愿在我看不到的天際，你張開了雙翼，遇見你的注定 (oh--)，她會有多幸運。\n青春是段跌跌撞撞的旅行，擁有著后知后覺的美麗，來不及感謝是你給我勇氣，讓我能做回我自己，也許當時忙著微笑和哭泣，忙著追逐天空中的流星，人理所當然的忘記，是誰風里雨里一直默默守護在原地。\n原來你是我最想留住的幸運，原來我們和愛情曾經(jīng)靠得那么近，那為我對抗世界的決定，那陪我淋的雨，一幕幕都是你，一塵不染的真心，與你相遇好幸運，可我已失去為你淚流滿面的權利，但愿在我看不到的天際，你張開了雙翼，遇見你的注定 (oh--)，她會有多幸運。'
var xxyObj = {
title: '小幸運',
box: '.text-box',
signature: '田馥甄',
text: text
}
var xiaoxingyun = new WRITE(xxyObj)
</script>
</body>
</html>
write.js:
/**
* boxClass: 放置容器class
* textArray：文本數(shù)組
* title: 文章標題
* signature: 署名
* text: 文本
* textArray: 文本截取的數(shù)組
* isEnd: 是否結束
* paragraphLength：段落長度
* paragraphIndex：當前所在段落
* textLength：當前文本長度
* textIndex：當前所在文本的位置
*/
// 創(chuàng)建書寫文章構造函數(shù)
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的內容
- 沒有做瀏覽器兼容處理，部分瀏覽器可能會無法發(fā)出聲音
- 打字聲音頻可以網(wǎng)上現(xiàn)在一個
效果
打字.gif
