JS实现鼠标移动拖尾


Posted in Javascript onDecember 27, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
jQuery原生的动画效果
Jul 10 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
JavaScript实现滚动加载更多
Dec 27 #Javascript
jQuery实现简单轮播图效果
Dec 27 #jQuery
JavaScript实现瀑布流布局的3种方式
Dec 27 #Javascript
Vue实现省市区三级联动
Dec 27 #Vue.js
JavaScript实现通讯录功能
Dec 27 #Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 #Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 #Vue.js
You might like
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
php多进程应用场景实例详解
2019/07/22 PHP
php给数组赋值的实例方法
2019/09/26 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
vue组件实现进度条效果
2018/06/06 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
Python多线程实例教程
2014/09/06 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python编写一个优美的下载器
2018/04/15 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
幼儿园毕业园长感言
2014/02/24 职场文书
排查整治工作方案
2014/06/09 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers