基于Css3和JQuery实现打字机效果_javascript技巧
程序员文章站
2022-04-08 19:42:05
...
先给大家附上效果图:
最近做项目的时候需要实现一个字符逐个出现的打字效果,用css的clip+css的动画实现的,与自己写的打字机效果相结合,整
理一起,效果很赞。
先来说说这个线条,我们会看到它是条,实际上就是个四周border有规律的显示隐藏,那么这里必定会想到after,before属性,
我们暂且先考虑after。
先建立一个box,然后after一个边框
.box:before{ content: ''; position: absolute; width:px;height: px;border:px red solid; left:-px;top:-px; z-index: ; }
接下来要做的就是让它有规律的显示隐藏就可以了,这里要用到clip属性,我这篇文章有讲到:css圆形百分比进度条的实现原理。
在这里说说我们这个如何实现,首先我要让这个先显示上边框-左-底-右,这样就有了一个循环。根据clip,rect(上,右,底,
左),比如显示上边框,那么就是:
clip:rect(px,px,px,px);
我们只需用animation让它依次显示就ok
@-webkit-keyframes clipMe{ %{ clip: rect(px, px, px, px); } %{ clip: rect(px, px, px, px); } %{ clip: rect(px, px, px, px); } %{ clip: rect(px, px, px, px); } %{ clip: rect(px, px, px, px); } }
然后再after中调用显示:
.box:after{ -webkit-animation:clipMe s linear infinite; }
当然,我们再加一个一模一样的before就ok了,他们的时间间隔为s,这里要注意,如果你是延迟s,那么你会在s内看到的是整
个边框出现,这里要改为延迟-s,这个问题就会完美解决。
.box:before{ -webkit-animation:clipMe s -s linear infinite; }
/***************************************************************/
再来说说打字机,打字机无非就是不断替换显示字符显示在屏幕上,先获取box里的内容,
/**仅共娱乐,然并卵**/Login : Jmingzi
password : ******
Access is granted
Welcome ymblog.net !
获取以后再一个个替换显示,
var t = setInterval(function(){ str = con.substr(, strlen) + "_"; me.obj.html(str); //内容打印完毕 if(strlen == con.length){ clearInterval(t); } strlen = strlen + ; }, me.speed);
在这里我只不过将它封装为一个类,便于初始化一些参数,完整代码:
//初始化工作,获取几段文字内容,将它们隐藏后逐个显示即可 $(function(){ function Type(obj, speed, welcome){ this.obj = obj; this.speed = speed; this.welcome = welcome; } Type.prototype = { init : function(){ var str = this.obj.html(); this.obj.html(this.welcome); this.add(str); }, add : function(con){ var me = this; var str; var strlen = ; var t = setInterval(function(){ str = con.substr(, strlen) + "_"; me.obj.html(str); //内容打印完毕 if(strlen == con.length){ clearInterval(t); } strlen = strlen + ; }, me.speed); } } var a = new Type($('.box'), , '正在初始化...'); a.init(); });
以上就是本文的全部内容,希望对大家有所帮助
推荐阅读
-
基于JQuery和原生JavaScript实现网页定位导航特效
-
基于jQuery实现的打字机效果
-
使用CSS3和Checkbox实现JQuery的一些效果
-
基于jQuery和CSS3实现APPLE TV海报视差效果
-
一款基于css3和jquery实现的动画显示弹出层按钮教程
-
基于JQuery和原生JavaScript实现网页定位导航特效
-
基于jquery的高性能td和input切换并可修改内容实现代码_javascript技巧
-
基于JQuery模仿苹果桌面的Dock效果(初级版)_javascript技巧
-
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)_javascript技巧
-
JS基于面向对象实现的放烟花效果_javascript技巧