js滑鼠懸浮字串實現字串跳動效果

antzone發表於2017-04-17
JS字串

分享一段程式碼例項，它實現了滑鼠懸浮字串，當前文字會出現跳躍現象。

算是一種比較靈動的效果了，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#txtDom {
  padding: 50px;
  width: 500px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.3em;
  text-indent: 2em;
}
</style>
</head>
<body>
<div id="txtDom">螞蟻部落歡迎您，本站的url地址是www.softwhy.com</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  += -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);
      };
    }
  }
}
 
var txtDom = document.getElementById("txtDom");
txtAnim.init(txtDom);
</script>
</body>
</html>

相關文章