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

成都創(chuàng)新互聯(lián)主要從事做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)溧水,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

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 = ["你", "真", "的", "愛", "我", "嗎", "喜", "歡", "不", "對", "起", "彩", "色", "世", "界", "灰", "?"];
    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 代碼

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

當(dāng)前名稱：使用JavaScript怎么實(shí)現(xiàn)一個鼠標(biāo)拖尾效果-創(chuàng)新互聯(lián)
本文地址：http://weahome.cn/article/pdode.html