文本/链接
实现逐字逐句显示文字jQuery插件
PetitQ
Letter-by-Letter-JS 是一款可以实现逐字逐句显示文字的 jQuery 插件。通过该插件你可以将一个段落的文字内容一个字一个字的逐一显示。文字的显示可以是打印机效果，也可以设置为淡入淡出效果，同时还可以控制文字的显示速度。
使用方法:
首先需要引入 jQuery 和 l-by-l.min.js 文件。
也想出现在这里？联系我们吧
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/l-by-l.min.js"></script>
HTML 结构:
你可以在任何 HTML 容器元素中调用该文字插件。可以是一个<div>，一个<span 或>是一个段落<p>元素。
<div class="example"></div>
初始化插件:
在页面 DOM 元素加载完毕之后，可以通过下面的方法来初始化该文字插件。
$(".example").lbyl({
content: "Lorem ipsum dolor sit amet..."
});
注意，如果在初始化前，<div>元素中已经存在一些文字内容，它们会被清除，之后才逐字显示上面的内容。
你也可以在初始化时传入一些参数：
$(".example").lbyl({
content: "Lorem ipsum dolor sit amet...",
speed: 10,
type: 'show',
fadeSpeed: 500,
finished: function(){ console.log('finished') }
});
如果你想在一个段落显示结束之后，在显示下一个段落，可以在 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}});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
