基于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 相关文章推荐
JavaScript中的new的使用方法与注意事项
May 16 Javascript
JMenuTab简单使用说明
Mar 13 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
百度地图自定义控件分享
Mar 04 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
js实现跨域的多种方法
Dec 25 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
RequireJS用法简单示例
Aug 20 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
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
php mysql 封装类实例代码
2016/09/18 PHP
php查询及多条件查询
2017/02/26 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
pandas的排序和排名的具体使用
2019/07/31 Python
基于python图像处理API的使用示例
2020/04/03 Python
Python之多进程与多线程的使用
2021/02/23 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
数学系毕业生的自我评价
2014/01/10 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
工程部主管岗位职责
2015/02/12 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS