使用JavaScript怎么實(shí)現(xiàn)一個(gè)鼠標(biāo)拖尾效果

發(fā)布時(shí)間：2020-12-28 14:07:57 來源：億速云閱讀：203 作者：Leah 欄目：開發(fā)技術(shù)

使用JavaScript怎么實(shí)現(xiàn)一個(gè)鼠標(biāo)拖尾效果？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

JS 代碼

function getMousePos(event) {
  var e = event || window.event;
  var mouseInfo = {
    mouseX : e.clientX,
    mouseY : e.clientY
  }
  return mouseInfo;
}
 
function getMouseArt() {
  this.artStyle = {
    position: "fixed",
    top: 0,
    left: 0,
    width: "50px",
    height: "50px",
    "font-size": 0,
    "color": 0,
    "text-transform": 0
  };
  this.init = function(obj) {
    var character = ["你", "真", "的", "愛", "我", "嗎", "喜", "歡", "不", "對(duì)", "起", "彩", "色", "世", "界", "灰", "?"];
    var font_trans = ["uppercase", "lowercase"];
    this.Alpha = 1;
 
    this.element = document.createElement('div');
    var text = document.createTextNode(character[Math.floor(Math.random() * character.length)]);
    this.element.appendChild(text);
 
    this.addStyle(this.element, this.artStyle);
 
    var offsetV = Math.floor(Math.random() * 60 - 30); // -30 ~ 30
    this.element.style.left = obj.mouseX + offsetV +"px"; // x
    this.element.style.top = obj.mouseY + offsetV +"px"; // y
    this.element.style.fontSize = Math.floor(Math.random() * 20 + 10) + "px";
    this.element.style.color = "hsla("+ Math.floor(Math.random() * 255) + ",100%,50%," + this.Alpha + ")";
    this.element.style.textTransform = font_trans[Math.floor(Math.random() * 2)];
 
    document.body.appendChild(this.element);
  }
  this.addStyle = function(ele, genuine) {
    for (var k in genuine) {
      ele.style[k] = genuine[k];
    }
  }
  this.delElement = function() {
    document.body.removeChild(this.element);
  }
  this.reduceColor = function(win) {
    if (this.Alpha <= 1 && this.Alpha > 0) {
      this.Alpha = this.Alpha - 0.1;
      this.element.style.color = "hsla("+ Math.floor(Math.random() * 255) + ",100%,50%," + this.Alpha + ")";
      console.log(this.Alpha);
     }
    else {
      clearInterval(win);
      this.delElement();
    }
  }
}
 
document.onmousemove = function(event) {
  var obj = getMousePos(event);
  var art = new getMouseArt();
  art.init(obj);
  var win = setInterval(function() {
    art.reduceColor(win);
  }, 30);
}

HTML 代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background: black;
    }
  </style>
</head>
<body>
  <script src="mouse.js" type="text/javascript"></script>
</body>
</html>

關(guān)于使用JavaScript怎么實(shí)現(xiàn)一個(gè)鼠標(biāo)拖尾效果問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問一下細(xì)節(jié)

使用JavaScript怎么實(shí)現(xiàn)一個(gè)鼠標(biāo)拖尾效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽