Javascrip实现文字跳动特效
一.如何让字符串变成一个个的字体，让我们去控制
1获取字符串内容
2清空字符串内容
3遍历字符串，然后一个个的切割出来。
4给切割出来的文字添加定位
5把添加好定位的文字，重新赋值到获取的元素里面。
二.鼠标滑动上去之后，该怎么去实现文字的跳动
1定义一个变量0
2定义定时器
3让变量不断的减少
4改变元素的top==变量
5当变量达到一定高度的时候，让变量不断的增加
6当变量减少到0（本身位置）的时候，
7清除动画改变元素的top=0（本身位置）
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>
文字跳动特效-vico
</title>
<styletype="text/css">
#txtDom{padding:50px;width:500px;margin:0auto;font-size:16px;
font-family:"微软雅黑";line-height:1.3em;text-indent:2em;}
</style>
</head>
<body>
<divid="txtDom">
要是没有错误和失败，你就不会学到东西；要是没有痛苦，你就不会长大。
一旦你明白了这些，你就知道了一切事情都是为了某种目的而发生。
所以不要紧张或者认为生活不公平，因为一切事情都有原因，只有时间能诉说教会了我们什么。
</div>
<scripttype="text/javascript">
vartxtAnim={
len:0,
txtDom:"",
arrTxt:[],
init:function(obj){
this.obj=obj;
this.txtDom=obj.innerHTML.replace(/\s+/g,"");
this.len=this.txtDom.length;
obj.innerHTML="";
this.addDom();
},
addDom:function(){
for(vari=0;i<this.len;i++){
varspanDom=document.createElement("span");
spanDom.innerHTML=this.txtDom.substring(i,i+1);
this.obj.appendChild(spanDom);
this.arrTxt.push(spanDom);
};
for(varj=0;j<this.len;j++){
this.arrTxt[j].style.position="relative";
};
this.strat();
},
strat:function(){
for(vari=0;i<this.len;i++){
this.arrTxt[i].onmouseover=function(){
this.stop=0;
this.speed=-1;
var$this=this;
this.timer=setInterval(function(){
$this.stop+=$this.speed;//0+=-1
if($this.stop<=-20){
$this.speed=1;
}
$this.style.top=$this.stop+"px";
if($this.stop>=0){
clearInterval($this.timer)
$this.style.top=0+"px";
};
},
15);
};
}
}
}
vartxtDom=document.getElementById("txtDom");
txtAnim.init(txtDom);
</script>
</body>
</html>
以上所述是小编给大家介绍的Javascrip实现文字跳动特效，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对毛票票网站的支持！