jQuery打字机效果插件

    演示效果

    HTML

    <spanid=“text”>生命是时时刻刻不知道如何是好</span>

    Javascript

    $.fn.typing =function(n){

    // 默认选项

    var options ={

    speed :100,// 打字速度

    range :100,// 打字速度波动的范围

    repeat :true,// 是否重复

    flashback :true,// 是否倒叙返回

    flicker :true// 是否闪烁

    }

    $.extend(options,n);

    var _this = $(this);

    var str = $(this).text().split();//分割字符串

    var index =0;// 当前索引

    var direction =1;// 1为正向,-1为反方向

    // 将分割后的字符串装入数组

    $(str).each(function(i,k){

    str[i]=(str[i1]? str[i1]:)+ str[i];

    });

    // 设置边框模拟光标

    _this.css(‘border-right’,‘1px solid #000’);

    // 启动定时器,开启打字效果

    setTimeout(init,options.speed);

    // 初始化函数

    function init(){

    _this.text(str[index]);

    // 如果运行到最后,且开启了重复

    if(index >=(str.length1)&& options.repeat){

    // 如果设置了倒叙则变换方向

    if(options.flashback){

    direction =1;// 变换方向为负方向

    }else{

    index =0;

    }

    // 如果设置了闪烁则启用闪烁效果

    if(options.flicker){

    _this.delay(200).fadeOut(1).delay(400).fadeIn(1).delay(200).fadeOut(1).delay(400).fadeIn(1);

    }

    setTimeout(init,2000);

    // 如果运行到最后但未开启重复

    }elseif( index >=(str.length1)&&!options.repeat ){

    // 如果设置了闪烁则启用闪烁效果

    if(options.flicker){

    _this.delay(200).fadeOut(1).delay(400).fadeIn(1).delay(200).fadeOut(1).delay(400).fadeIn(1);

    }

    // 移除光标样式

    _this.css(‘border-right’,);

    // 如果倒回到开始

    }elseif(index <0){

    index =0;

    direction =1;// 变换方向为正方向

    setTimeout(init,Math.random()*options.range + options.speed);

    }else{

    setTimeout(init,Math.random()*options.range + options.speed);

    }

    index += direction;

    }

    };

     

    $(‘#text’).typing({

    range :200,

    repeat :true

    });



    转载请注明:Reforn Lu° Blog » jQuery打字机效果插件

    分类:磁盘(C:)


喜欢 0

已经有3 人抢在你前面了~

  • 春熙路自媒体 10年前 (2014-07-26)

    赞一个

  • 360论坛 10年前 (2014-08-02)

    Javascript$.fn.typing =function(n){// 默认选项var options ={speed :100,// 打字速度range :100,// 打字速度波动的范围repeat :true,// 是否重复flashback :true,// 是否倒叙返回flicker :true// 是否闪烁}$.extend(options,n);

  • peelonion 9年前 (2015-01-18)

    我有一个类似动作的演示网页,http://liujinyuan.com.cn/devtool/love/

p4r gaming