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 代码

<!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实现鼠标移动拖尾 的全部内容, 来源链接: utcz.com/z/341551.html

回到顶部