Javascrip实现文字跳动特效

一.如何让字符串变成一个个的字体，让我们去控制
1获取字符串内容
2清空字符串内容
3遍历字符串，然后一个个的切割出来。
4给切割出来的文字添加定位
5把添加好定位的文字，重新赋值到获取的元素里面。
二.鼠标滑动上去之后，该怎么去实现文字的跳动
1 定义一个变量0
2 定义定时器
3让变量不断的减少
4改变元素的top == 变量
5当变量达到一定高度的时候，让变量不断的增加
6 当变量减少到0（本身位置）的时候，
7清除动画改变元素的top = 0（本身位置）

<！DOCTYPE html><html> <head><meta charset="utf-8" /><title> 文字跳动特效-vico</title><style type="text/css"> #txtDom{ padding: 50px; width:500px; margin: 0 auto; font-size: 16px; font-family: "微软雅黑"; line-height: 1.3em; text-indent: 2em;}</style> </head> <body><div id="txtDom"> 要是没有错误和失败，你就不会学到东西；要是没有痛苦，你就不会长大。 一旦你明白了这些，你就知道了一切事情都是为了某种目的而发生。所以不要紧张或者认为生活不公平，因为一切事情都有原因，只有时间能诉说教会了我们什么。</div><script type="text/javascript"> var txtAnim = {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 （var i = 0; i < this.len; i++） {var spanDom = document.createElement（"span"）;spanDom.innerHTML = this.txtDom.substring（i, i + 1）;this.obj.appendChild（spanDom）;this.arrTxt.push（spanDom）; }; for （var j = 0; j < this.len; j++） {this.arrTxt[j].style.position = "relative"; }; this.strat（）;},strat: function（） { for （var i = 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 += -1if （$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）;}; }} } var txtDom = document.getElementById（"txtDom"）; txtAnim.init（txtDom）;</script> </body></html>

以上所述是小编给大家介绍的Javascrip实现文字跳动特效，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对脚本之家网站的支持！