基于Css3和JQuery实现打字机效果


Posted in Javascript onAugust 11, 2015

先给大家附上效果图:

基于Css3和JQuery实现打字机效果

最近做项目的时候需要实现一个字符逐个出现的打字效果,用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();
});

以上就是本文的全部内容,希望对大家有所帮助

Javascript 相关文章推荐
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
Javascript创建类和对象详解
May 31 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 #Javascript
js判断子窗体是否关闭的方法
Aug 11 #Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 #Javascript
iframe跨域通信封装详解
Aug 11 #Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 #Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 #Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 #Javascript
You might like
php获取系统变量方法小结
2015/05/29 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python一键去抖音视频水印工具
2018/09/14 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Django框架模板用法入门教程
2019/11/04 Python
python实现飞机大战项目
2020/03/11 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
人事助理自荐信
2014/02/02 职场文书
怀念母亲教学反思
2014/04/28 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS