使文本看起来像正在用打字机打字一样
Make text appear like it is being typed like with a typewriter
我怎样才能使文本出现,如果它是键入一个字母在一个时间与JavaScript和jQuery?
我尝试隐藏内容,然后在许多setTimeout()
调用中每次显示一个字母,但这似乎效率非常低。
有谁知道更好的方法来做到这一点或脚本或插件,可以模拟这种效果?
我也想要一个闪烁的光标!
jQuery打字机可在此下载:https://github.com/chadselph/jquery-typewriter
下面是它如何工作的一个例子:
$('.someselector').typewrite({
'delay': 100, //time in ms between each letter
'extra_char': '', //"cursor" character to append after each display
'trim': true, // Trim the string to type (Default: false, does not trim)
'callback': null // if exists, called after all effects have finished
});
这是我做的一个例子
(function($){$.fn.typeWrite=function(s){
var o={content:$(this).text(),delay:50,t:this,i:0};
if(s){$.extend(o,s);}o.t.text('');
var i=setInterval(function() {
o.t.text(o.t.text()+o.content.charAt(o.i++));
if(o.i==o.content.length){clearInterval(i);}}
,o.delay);
return o.t;
};})(jQuery);
$('#test').typeWrite({content:'The stuff to type'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id=test></div>
相关文章:
- 使用向下箭头键(与tab键一样)聚焦下一个输入
- 在SVG地图上添加水的渐变,就像在谷歌地图(PHP/JS)中一样
- 如何像模糊图像一样模糊iframe
- 如何在JavaScript中创建打字机效果,这将考虑html标记规则
- FullCalendar:事件发生时阻止重叠.标题是一样的
- 如何检测滚动事件是否像在触摸设备上一样只触发一次
- DIV怎么能像Javascript中的另一个元素一样工作呢
- 我正在创建一个聊天,但每次我发送消息时,它都不会让我再发送另一条消息,就像表格一样;不起作用
- 有没有8个谜题和15个谜题一样无法解决
- 如何缩放像图像一样的元素
- 我需要iframe的内容像动画一样展开,填满整个屏幕并缩小到原来的大小
- 是否可以像字符串一样/操作/函数
- 我可以像其他库一样将JointJS作为AngularJS模块注入吗
- 从用户输入中制作数组动画,如打字机(javascript)
- 为什么可以'我们在函数体中为函数对象添加属性,就像在javascript中为对象文字添加属性一样
- 我如何创建一个选择器,就像jQuery有jQuery()或$()一样
- jQuery中可暂停的打字机效果
- 为什么'这两根绳子不一样吗
- 为什么答案是一样的
- 使文本看起来像正在用打字机打字一样