html鼠标拖尾效果,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 代码

Document

body {

background: black;

}

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