基于Css3和JQuery实现打字机效果
2015-08-11 00:00
423 查看
先给大家附上效果图:
最近做项目的时候需要实现一个字符逐个出现的打字效果,用css的clip+css的动画实现的,与自己写的打字机效果相结合,整
理一起,效果很赞。
先来说说这个线条,我们会看到它是条,实际上就是个四周border有规律的显示隐藏,那么这里必定会想到after,before属性,
我们暂且先考虑after。
先建立一个box,然后after一个边框
<div class="box"></div> .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里的内容,
<div class="box"> <span>/**仅共娱乐,然并卵**/</span> <p>Login : Jmingzi</p> <p>password : ******</p> <p>Access is granted</p> <span>Welcome ymblog.net !</span> </div>
获取以后再一个个替换显示,
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 mobile自定义时间选择器控件
- JQuery AJAX 方法总结:
- JQUERY使用AJAX
- JQuery根据字母检索元素并导航到指定位置
- XXX系统发展综述(SSH+Jquery EasyUI)
- JQuery根据关键字检索html元素并筛选显示
- jQuery表格排序总成-tablesorter
- jQuery笔记
- jQuery 获取url中的参数
- 使用jquery easyui dialog 加载远程页面时,远程页面有CKEDITOR等需要调用JS,解决方案:
- jQuery的盒子模型
- jquery 1.7.2 val()方法
- 实现jQuery扩展总结
- jQuery的CSS操作
- jquery EasyUI 心得--------1.datagrid衍生出的奇葩需求
- jQuery 克隆对象
- js改变,设置table单双行颜色,jquery改变,设置table单双行颜色
- Ajax应用示例之用户名检查
- jquery-easyui拓展之datagrid复合表头列锁定/解锁和列隐藏/显示
- jQuery动画高级用法(上)——详解animation中的.queue()动画队列插队函数