文字打印机效果实现

简单的文字打印机效果

很久没写过 juqey, 看招聘信息里面都是什么精通jquey、 react、 vue 诸如此类。。。
精通离我很远，熟练也不敢说。也就是简简单单的貌似掌握。
看见一个博客里的效果，突然自己想实现。简简单单写个 jquery 插件。

给jquery 增加 fadeText 方法
参数 options
options.time 时间文字插入间隔
options.text 待插入的文字
options.fn // 为 fn 提供三个参数函数 (stopFadeText, goOn, end)
stopFadeText 停止文字渐进效果
goOn 恢复文字渐进效果
end 结束文字渐进效果，立即到渐进效果最后一帧。

$.fn.extend({fadeText (options) {var time = options.time || 200var text = options.text.toString()var fn = options.fn || function () {}// 当前字符串 下标var index = 0// 字符串 总长度var length = text.length// 记录定时器 id 的var k = null// 记录 this    var that = thisconsole.log(fn)var fadeText = function () {index ++;k !== null && clearTimeout(k)console.log(text.substr(0, index))//裁切 text 从第一位开始 长度为 index 的字符串that.text(text.substr(0, index))console.log($(that))if (index > length - 1)returnk = setTimeout(fadeText, time)}var stopFadeText = function () {clearTimeout(k)k = null}var goOn = function () {  if ( k !== null) {index --fadeText()}      }var end = function () {clearTimeout(k)that.text(text.substr(0, length - 1))}fadeText()fn(stopFadeText, goOn, end)return this}
})

demo测试地址

文字打印机效果实现相关推荐

unity文字逐个出现实现文字打印机效果
这里提供一个万金油模板,无论是什么UI的Text都可以用,只需要替换掉部分代码即可使用. 核心代码: //显示的文本. private string str = "中国博物馆是中国文物和标本 ...
unity文字逐个出现实现文字打印机效果-Text
movie_003 代码: using System; using UnityEngine; using System.Collections; using UnityEngine.UI;public ...
滚动触发的翻转式文字引用效果
在线演示本地下载滚动页面,可以看到翻转式的文字引用效果.
html5显示字幕信息,HTML5 Placeholder实现input背景文字提示效果
本文作者html5tricks,转载请注明出处这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但in ...
炫酷背光文字html,详细PS教程大放送：如何快速做出高级创意的文字背光效果？...
原标题:详细PS教程大放送:如何快速做出高级创意的文字背光效果? 现在做海报,做广告等,都需要有文案,高级炫酷的文字,会为你的作品加分,让整张海报瞬间高逼格,那如何快速用ps做错高级创意的文字背光效果 ...
（转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）...
一.文字环绕效果: html代码如下: 1 <body>2 3 <style type="text/css">4 #big img {float: left ...
HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
从天而降的文字，文字掉落效果
从天而降的文字,文字掉落效果,文字(字符)一个个从网页顶部向下落下来,最终形成一句话.一款基于JavaScript文字特效,效果挺流畅的JavaScript文字掉落特效. <html> & ...

文字打印机效果实现

简单的文字打印机效果

文字打印机效果实现相关推荐

最新文章

热门文章

文字打印机 效果实现

简单的文字打印机 效果

文字打印机 效果实现相关推荐

最新文章

热门文章

文字打印机效果实现

简单的文字打印机效果

文字打印机效果实现相关推荐