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实现文字跳动特效,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对毛票票网站的支持!