html鼠标拖尾效果,JS实现鼠标移动拖尾

这篇博客介绍了一种用JavaScript实现HTML鼠标移动时的拖尾效果的方法。通过创建div元素并设置其位置、大小、颜色等属性,跟随鼠标移动,并在一定时间内逐渐淡化消失。代码包括获取鼠标位置的函数、定义拖尾样式、生成随机字符和颜色等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文实例为大家分享了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;

}

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

实现异形鼠标效果,可以使用 CSS3 的 `mix-blend-mode` 属性和 `filter` 属性来实现。 首先,在 HTML 中创建一个用于鼠标的元素,例如一个 `div` 元素,并设置其样式为固定定位、大小和背景颜色等。然后,使用 `mix-blend-mode` 属性设置其混合模式为 `screen`,并使用 `filter` 属性设置其模糊效果。 接下来,在 JavaScript 中监听鼠标移动事件,并在每个事件中更新鼠标元素的位置。可以使用 `transform` 属性来实现元素的平移,同时使用 `transition` 属性来添加过渡效果。 最后,为了避免效果出现过多的重叠,可以使用 `setTimeout` 函数来定时清除元素。 以下是一个简单的示例代码: HTML 代码: ```html <div class="trail"></div> ``` CSS 代码: ```css .trail { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: #ffffff; mix-blend-mode: screen; filter: blur(10px); transition: transform 0.3s ease-out; } ``` JavaScript 代码: ```javascript var trail = document.querySelector('.trail'); document.addEventListener('mousemove', function(e) { trail.style.transform = 'translate(' + (e.clientX - 10) + 'px, ' + (e.clientY - 10) + 'px)'; }); setInterval(function() { trail.style.transform = 'translate(-1000px, -1000px)'; }, 300); ``` 在这个示例中,鼠标元素的大小为 20x20 像素,混合模式为 `screen`,模糊效果为 10 像素,过渡效果为 0.3 秒。每当鼠标移动时,元素的位置会根据鼠标位置进行更新。同时,也会定时清除元素,以避免重叠。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值