JS实现鼠标移动拖尾

更新时间：2020年12月27日 11:17:23 作者：day0

这篇文章主要为大家详细介绍了JS实现鼠标移动拖尾效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现鼠标移动拖尾的具体代码，供大家参考，具体内容如下

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 代码

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

var let const关键字之间的区别及使用场景示例详解
这篇文章主要为大家介绍了var let const关键字之间的区别及使用场景示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-12-12
自己的js工具 Event封装
说到浏览器中的event,相信不少人都很头疼,ie的event大部分时候都可以获取到
2009-08-08
浅谈JS之iframe中的窗口
下面小编就为大家带来一篇浅谈JS之iframe中的窗口。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
JS+CSS相对定位实现的下拉菜单
这篇文章主要介绍了JS+CSS相对定位实现的下拉菜单,涉及JavaScript结合css的定位技术实现下拉菜单的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
TS中type和interface的区别解析
对于type来说，更多的是对类型的一种复用，比如在项目中需要用到一些比较复杂的或者书写起来很长的类型，而对于 interface来说，它是正儿八经的用来定义接口类型（约束数类型和属性）的，且接口类型是支持继承和声明合并的，感兴趣的朋友跟随小编一起看看吧
2023-07-07
JS小功能(onmouseover实现选择月份)实例代码
这篇文章主要介绍了onmouseover实现选择月份实例代码，有需要的朋友可以参考一下
2013-11-11
一个加载js文件的小脚本
一个加载js文件的小脚本...
2007-06-06
Textarea根据内容自适应高度
使用JAVASCRIPT控制Textarea内容自适应高度，实施起来很简单，很平滑。
2013-10-10
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
这篇文章主要介绍了JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法,涉及javascript dom模型及事件响应相关操作技巧,需要的朋友可以参考下
2017-01-01
setTimeout时间设置为0详细解析
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层容器名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method，下面这篇文章主要给大家介绍了关于setTimeout时间设置为0的相关资料，需要的朋友可以参考下。
2018-03-03