jQuery炫酷文字翻转打字机特效

当前位置:主页 > jQuery库 > 文本和超链接 > jQuery炫酷文字翻转打字机特效
jQuery炫酷文字翻转打字机特效
分享:

    插件介绍

    这是一款使用jQuery制作的炫酷文字翻转打字机特效插件。该打字机特效中文字以3d翻转的方式一个个的出现,形成打字机效果,共有5种不同的打字机效果,其中有的效果文字在翻转的同时还不断变化,效果很酷。

    浏览器兼容性

    浏览器兼容性
    时间:2014-12-27
    阅读:
简要教程

这是一款效果炫酷的jQuery文字翻转打字机特效插件。注意,这个打字机特效插件只在Chrome, Firefox, Safari浏览器的桌面和移动设备上测试通过,在IE浏览器上海没有测试。

要使用这个打字机特效插件,你需要子啊html中引入jQuery和jQuery.flipping_text.js文件。

HTML结构

在引入以上文件后,在body标签中放置下面的html代码:

<body>
  ..
  <h1 class="intro">...</h1>
  ..
</body>
                

JAVASCRIPT

$(".intro").flipping_text({
    tickerTime: 10,
    customRandomChar: false,
    tickerCount: 10,
    opacityEffect: true,
    resetOnChange: false
});

                

打字机特效插件将自动计算容器中的文字个数,并执行打字机效果。下面来看看一些可用的参数:

  • tickerTime:该参数用于设置打字机的打字速度,单位毫秒。默认值为10ms。
  • customRandomChar:该参数用于设置随机字符。默认的字符为“ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789”,你可以设置自己的用于打印的字符。
  • tickerCount:该参数用于设置打字机在字符变化时变化多少次才显示真正的字符。默认值是10次。
  • opacityEffect:该参数用于设置打字机字符变化效果,默认为“fade-in ”效果。要关闭该效果,设置它为false。
  • resetOnChange:该参数是文字停止动画和显示下一个文字时的回调函数。当用户按了“tabs”键时,动画被重置,默认值为false。
按顺序播放文字序列

这个打字机特效插件允许你通过设置data-delay属性来定义每个文字的动画时间,并使文字按一定的序列一一打印。

data-delay

为了让开发者使用方便,这个打字机特效插件将自动计算每个文字的打印时间,不需要你去计算它们的时间总和,下面是一个例子:

<body>
    ..
    <h1 class="intro">...</h1>
    <h1 class="intro" data-delay="1000">...</h1>
    <h1 class="intro" data-delay="1000">...</h1>
    ..
</body>
                

想象一下你要每一秒打印一个文字,在上面的代码中,第一个intro会立刻被显示,第二个会延时1秒,第三个会延时2秒。所以,你只需要 定义1000ms的data-delay就可以完成这个效果。