现在上网真是太方便了，搞编程的人都爱在网页里加那种打字特效，尤其是那个叫jQuery的东西超级炫酷！不过，想要更上一层楼，就得学点小绝招才行。比如，如何解决打字时删字的困扰。别急，今天我给你们介绍一种jQuery打字特效方法，让你的网页炫到爆！
引入jQuery和插件库文件
想玩转jQuery和这啥typed.js的打字特效吗?那就赶紧在HTML里加进去呗！不过别忘了，它俩可是得靠着 jQuery才能跑起来。弄个jQuery就不用我多说了？
创建展示打字特效的元素
在网页加个能看打字效果的地儿，用啥标签都行。
使用typed.js初始化函数配置打字特效
找来我们事先准备好的素材，在typed.js上动点手脚设置一下：比如打字的速度，鼠标的恢复，还有屏幕指针好看点儿。然后别忘了想一想要说的内容！这么一整，就能帮你做出有个性的设计了。
$(function(){
$("#typewriter").typed({
strings:["Hello world!","This is a jquery typewriter effect demo."],
typeSpeed: 120, //打字速度
backSpeed: 50, //回删速度
cursorChar: "|", //光标样式
loop: true //是否循环
});
});
解决回删过程中的用户体验问题
有时候，打字神器用着用着，界面就乱飞了，啥也看不见只能傻等。一不留神手滑了下或者瞎按键盘，打字模式就立马锁定了，非得你亲自动手才行。这个问题真的让人抓狂，直接拉低了使用感受！
利用jQuery绑定鼠标事件和键盘事件
咱们来想想怎么处理那些删都删不掉的乱码！用jQuery约束鼠标和键盘操作，借助typed.js的API防止清除功能，然后设好个变量记录当前行为，初始值要设为”正在进行”哟~
监听鼠标事件和键盘事件实现停止回删
首先，利用$（window）找到那个小宝贝儿，切换成jQuery的on()方法，把它能感受到的各种动静——比如鼠标点啦、拖啦、键盘敲啦之类的，统统帮它搞定。接着，在处理函数里，搞个名叫isTyping的变量，看看现在是不是正在码字。要是真滴在输入，那就得先把删帖停了，设成暂停模式。若是处于暂停时，用户爱怎么闹腾就咋闹腾，反正都不理会他们，直到回归正常再说。
$(function(){
var isTyping = true; //打字特效正在进行中
$("#typewriter").typed({
strings:["Hello world!","This is a jquery typewriter effect demo."],
typeSpeed: 120,
backSpeed: 50,
cursorChar: "|",
loop: true,
onTypingPaused: function(){ //打字特效暂停事件
isTyping = false; //设置打字特效状态为暂停
},
onTypingResumed: function(){ //打字特效恢复事件
isTyping = true; //设置打字特效状态为恢复
},
onTypingStopped: function(){ //打字特效停止事件
isTyping = false; //设置打字特效状态为停止
}
});
});
优化代码实现更好的用户体验
不用使劲儿按回车用toggle()函数就行了，连删除都能交给backspace()，这样编程既简单又方便，工作效率也提高不少~
总结
想让你的网站变得牛逼哄哄的用户友好？便用jQuery来搞个打字特效练练手！瞧那删除符号都能变成动画，用起来嗖嗖滴顺滑又自然！这得归功于typed.js的API函数和状态属性以及jQuery对鼠标和键盘的神奇控制力。
评论0