石家庄人才网今天给大家分享《网页鼠标点击特效代码js》，石家庄人才网小编对内容进行了深度展开编辑，希望通过本文能为您带来解惑。

网页鼠标点击特效可以使用 JavaScript 代码来实现，以下是一些常见的特效及代码示例：

1. 点击出现爱心特效

```javascriptdocument.addEventListener('click', function(e) { createHeart(e.clientX, e.clientY);});function createHeart(x, y) { const heart = document.createElement('div'); heart.innerHTML = '??'; heart.style.position = 'fixed'; heart.style.left = x + 'px'; heart.style.top = y + 'px'; heart.style.fontSize = Math.random() ○ 50 + 10 + 'px'; heart.style.color = getRandomColor(); document.body.appendChild(heart);

setTimeout(() => { heart.remove(); }, 1000);}

function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() ○ 16)]; } return color;}```

这段代码会在鼠标点击的位置创建一个随机大小和颜色的爱心，并在 1 秒后消失。

2. 点击出现涟漪特效

```javascriptdocument.addEventListener('click', function(e) { createRipple(e.clientX, e.clientY);});function createRipple(x, y) { const ripple = document.createElement('div'); ripple.style.position = 'fixed'; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; ripple.style.width = '0px'; ripple.style.height = '0px'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; ripple.style.opacity = '1'; document.body.appendChild(ripple);

setTimeout(() => { ripple.style.width = '200px'; ripple.style.height = '200px'; ripple.style.opacity = '0'; }, 0); setTimeout(() => { ripple.remove(); }, 1000);}```

这段代码会在鼠标点击的位置创建一个圆形涟漪，并逐渐扩散消失。

3. 点击改变页面背景颜色

```javascriptdocument.addEventListener('click', function() { document.body.style.backgroundColor = getRandomColor();});function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() ○ 16)]; } return color;}```

这段代码会在每次鼠标点击时随机改变页面背景颜色。石家庄人才网小编提醒大家，以上只是一些简单的示例，您可以根据自己的需求修改代码，创造出更多炫酷的鼠标点击特效。

石家庄人才网小编对《网页鼠标点击特效代码js》内容分享到这里，如果有相关疑问请在本站留言。