html逐字显示后静止,实现逐字逐句显示文字的jQuery插件

Letter-by-Letter-JS是一款可以实现逐字逐句显示文字的jQuery插件。通过该插件你可以将一个段落的文字内容一个字一个字的逐一显示。文字的显示可以是打印机效果，也可以设置为淡入淡出效果，同时还可以控制文字的显示速度。

使用方法

首先需要引入jQuery和l-by-l.min.js文件。

HTML结构

你可以在任何HTML容器元素中调用该文字插件。可以是一个

，一个 或是一个段落

元素。

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该文字插件。

$(".example").lbyl({

content: "Lorem ipsum dolor sit amet..."

});

注意，如果在初始化前，

元素中已经存在一些文字内容，它们会被清除，之后才逐字显示上面的内容。

你也可以在初始化时传入一些参数：

$(".example").lbyl({

content: "Lorem ipsum dolor sit amet...",

speed: 10, //time between each new letter being added

type: 'show', // 'show' or 'fade'

fadeSpeed: 500, // Only relevant when the 'type' is set to 'fade'

finished: function(){ console.log('finished') } // Finished Callback

});

如果你想在一个段落显示结束之后，在显示下一个段落，可以在finished方法中调用该插件的第二个实例来实现。

jQuery(document).ready(function($){

$(".example-1").lbyl({

content: "first content...",

finished: function() {

$(".example-2").lbyl({

content: "second content..."

});

}

});

});

移动手机兼容

该插件在移动手机上使用可能会有一些性能上的问题，可以通过Modernizer来检测是否是手机设备来做相应的处理：

jQuery(document).ready(function($){

if ( $('html').hasClass('touch') ) {

// Do Nothing

} else {

$(".example-1").lbyl({

content: "Lorem ipsum dolor sit amet..."

})

}

});

或者可以使用Device.js来检测当前设备是手机，平板还是桌面设备，在做相应的处理：

jQuery(document).ready(function($){

if ( $('html').hasClass('desktop') ) {

$(".example-1").lbyl({

content: "Lorem ipsum dolor sit amet..."

})

} else {

// Do Nothing

}

});