动起来的文字—内容一行一行显示，可动态修改样式
2016-03-22 本文已影响1831人
webCoder
昨天吃饭的时候看到简书上一篇文章，瞬间被简历中的效果及其创意所吸引，并决定模仿其实现简历中的效果(js+css3)。
- 首先，我们还是看结果图：
pic1.jpg
pic2.jpg
页面中原先是什么都没有的，然后内容一个字一个字的显示，最后是逐行全部显示。
实现原理：
1.单行文本内的字挨个显示出来,利用——css3的animation动画控制宽度，以及“overflow: hidden;white-space: nowrap;”属性来实现，代码如下：
.text-content .each-line{width: 0;overflow: hidden;white-space: nowrap;
line-height: 26px;animation:textShow 5s forwards;}
@keyframes textShow
{
from {width:0px;}
to {width:100%;}
}
2.内容逐行打印及动态修改样式
- 2.1 内容逐行打印，利用——js的setTimeout定时器，在特定的时间间隔后向容器中追加内容:load方法；
- 2.2 动态修改样式，也是利用js的setTimeout定时器，然后遍历需要增加的样式，可以指定多种样式，保存在dic字典中setStyle方法；
代码如下：
<div class="text-content" id="text-content"></div>
<script src="jquery.js"></script>
<script>
var m=0;
var coder = function(){
}
var time = 1000;
coder.prototype ={
constructor: coder,
load: function(code){
setTimeout(function(){
$(".text-content").append("<p class='each-line'>"+code+"</p>");
},time);
time = time+1000;
},
setStyle: function(className,styles,seconds){
var seconds = seconds?seconds:0;
for (var key in styles){
(function(key){
time+=seconds;
setTimeout(function(){
console.log(key);
$("."+className).css(key,styles[key]);
},time);
})(key);
}
}
}
var c = new coder();
c.load("<span class='comment'>/*首先是注释*/</span>");
c.load("function(){");
c.load("console.log('hello world');");
c.load("}");
c.setStyle('comment',{'color':'#f00','font-size':'12px'},1000);
</script>
最后，附上整个页面的源码，大家可以保存在本地，看看最终效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态打印文字，增加样式</title>
<style>
.text-content{background: #000;color: #fff;border: 1px solid #eee;}
.text-content .each-line{width: 0;overflow: hidden;white-space: nowrap;line-height: 26px;animation:textShow 5s forwards;}
@keyframes textShow
{
from {width:0px;}
to {width:100%;}
}
</style>
</head>
<body>
<div class="text-content" id="text-content"></div>
<script src="jquery.js"></script>
<script>
var m=0;
var coder = function(){
}
var time = 1000;
coder.prototype ={
constructor: coder,
load: function(code){
setTimeout(function(){
$(".text-content").append("<p class='each-line'>"+code+"</p>");
},time);
time = time+1000;
},
setStyle: function(className,styles,seconds){
var seconds = seconds?seconds:0;
for (var key in styles){
(function(key){
time+=seconds;
setTimeout(function(){
$("."+className).css(key,styles[key]);
},time);
})(key);
}
}
}
var c = new coder();
c.load("<span class='comment'>/*首先是注释*/</span>");
c.load("function(){");
c.load("console.log('hello world');");
c.load("}");
c.setStyle('comment',{'color':'#f00','font-size':'12px'},1000);
</script>
</body>
</html>
