js鼠标悬浮字符串实现字符串跳动效果

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了鼠标悬浮字符串,当前文字会出现跳跃现象。

算是一种比较灵动的效果了,需要的朋友可以做一下参考。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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.pipipi.net</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>

js鼠标悬浮字符串实现字符串跳动效果,这样的场景在实际项目中还是用的比较多的,关于js鼠标悬浮字符串实现字符串跳动效果就介绍到这了。

js鼠标悬浮字符串实现字符串跳动效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容