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 相关文章推荐
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
Vue中使用vux配置代码详解
Sep 16 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
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
PHP重定向的3种方式
2013/03/07 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
php中Ctype函数用法详解
2014/12/09 PHP
php中的动态调用实例分析
2015/01/07 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
Python中DJANGO简单测试实例
2015/05/11 Python
python Django框架实现自定义表单提交
2016/03/25 Python
详解Python迭代和迭代器
2016/03/28 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
keras实现多种分类网络的方式
2020/06/11 Python
如何查找和删除数据库中的重复数据
2014/11/05 面试题
学校十一活动方案
2014/02/01 职场文书
公司离职证明样本
2014/09/13 职场文书
用python自动生成日历
2021/04/24 Python
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers