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 相关文章推荐
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 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
PHP简单实现数字分页功能示例
2016/08/24 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
js实现转动骰子模型
2019/10/24 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
js实现列表按字母排序
2020/08/11 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
python 将大文件切分为多个小文件的实例
2019/01/14 Python
python实现合并两个排序的链表
2019/03/03 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
语文高效课堂实施方案
2014/05/03 职场文书
2014年施工员工作总结
2014/11/18 职场文书
同学毕业留言寄语
2015/02/27 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
校园安全主题班会
2015/08/12 职场文书
nginx内存池源码解析
2021/11/20 Servers
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL