实现逐字逐句显示文字的jQuery插件

当前位置:主页 > jQuery库 > 文本和超链接 > 实现逐字逐句显示文字的jQuery插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
实现逐字逐句显示文字的jQuery插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-07-07
    阅读:
简要教程

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, //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 
   }
});          
              

网友评论