原生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 ~ 30this.element.style.left = obj.mouseX + offsetV +"px"; // xthis.element.style.top = obj.mouseY + offsetV +"px"; // ythis.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>

南无阿弥陀佛，新年吉祥！

原生JS鼠标移动拖尾效果相关推荐

js控制鼠标移动_原生JS封装可拖拽效果
项目代码已上传码云:小朋友/JavaScript 封装可拖拽特效访问该URL可查看效果:http://is666a.gitee.io/javascript_drag/ https://www.zhi ...
js 实现鼠标移动拖尾效果
img需要添加绝对定位 img { position: absolute; } js代码: //声明一个变量计次 var count=0; //鼠标相对于文档移动时触发移动时间 document.on ...
html+js 实现鼠标粒子拖尾效果其中调用underscore和jQuery库
演示视频: 运用了underscore和jQuery库,将库导入项目文件并调用即可, 如下代码的: <script src="underscore.min.js" type= ...
纯js实现鼠标拖尾效果（好玩又简单，一学就会）
js特效-鼠标滑动的拖尾效果 <script>//鼠标移动事件(document范围内移动)document.onmousemove=function(event){//1.创建divva ...
html鼠标拖尾效果,JS实现鼠标移动拖尾
本文实例为大家分享了JS实现鼠标移动拖尾的具体代码,供大家参考,具体内容如下 JS 代码 function getMousePos(event) { var e = event || window.e ...
游戏中实现鼠标拖尾效果
游戏中使用Trail Renderer这个通过设置参数来实现拖尾效果,通过在update中吧鼠标的点击的路径给怪哉这个得物体. 转载于:https://www.cnblogs.com/qinshuai ...
html鼠标拖尾效果,javascript canvas拖尾效果
{$title} var lujinglist = []; //制作路径 for (var x = 10; x <= 300; x++) { var dian = [x, 50]; lujing ...
html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Sa ...
用原生JS实现3D轮播效果
用原生JS实现3D轮播效果实现思路: 先实现无缝轮播效果添加3D效果完善代码增加自动轮播效果效果如下: 视图中显示3张图片,并通过CSS的透视和旋转实现3D效果,当无任何操作时,图片自动循环 ...

原生JS鼠标移动拖尾效果

原生JS鼠标移动拖尾效果相关推荐

最新文章

热门文章