网页鼠标点击特效案例收集
Posted Lvcx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页鼠标点击特效案例收集相关的知识，希望对你有一定的参考价值。
1. 鼠标点击出随机颜色的爱心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 网页鼠标点击特效（爱心） -->
<script type="text/javascript">
! function (e, t, a)
function r()
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
"px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
.scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
requestAnimationFrame(r)
function n()
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function (e)
t && t(), o(e)
function o(e)
var a = t.createElement("div");
a.className = "heart", s.push(
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: c()
), t.body.appendChild(a)
function i(e)
var a = t.createElement("style");
a.type = "text/css";
try
a.appendChild(t.createTextNode(e))
catch (t)
a.styleSheet.cssText = e
t.getElementsByTagName("head")[0].appendChild(a)
function c()
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
.random()) + ")"
var s = [];
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e)
setTimeout(e, 1e3 / 60)
, i(
".heartwidth: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);.heart:after,.heart:beforecontent: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;.heart:aftertop: -5px;.heart:beforeleft: -5px;"
), n(), r()
(window, document);
</script>
</body>
</html>
2. 鼠标点击出随机设置的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
(function ()
var a_idx = 0;
window.onclick = function (event)
var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤",
"❤敬业❤", "❤诚信❤", "❤友善❤");
var heart = document.createElement("b"); //创建b元素
heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
a_idx = (a_idx + 1) % a.length;
heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
var f = 16, // 字体大小
x = event.clientX - f / 2, // 横坐标
y = event.clientY - f, // 纵坐标
c = randomColor(), // 随机颜色
a = 1, // 透明度
s = 1.2; // 放大缩小
var timer = setInterval(function () //添加定时器
if (a <= 0)
document.body.removeChild(heart);
clearInterval(timer);
else
heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
s + ");";
y--;
a -= 0.016;
s += 0.002;
, 15)
// 随机颜色
function randomColor()
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
.random() * 255)) + ")";
());
</script>
</body>
</html>
3. 鼠标点击出现烟花波纹
<html>
<head>
</head>
<body>
<script>
function clickEffect()
let balls = [];
let longPressed = false;
let longPress;
let multiplier = 0;
let width, height;
let origin;
let normal;
let ctx;
const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
const pointer = document.createElement("span");
pointer.classList.add("pointer");
document.body.appendChild(pointer);
if (canvas.getContext && window.addEventListener)
ctx = canvas.getContext("2d");
updateSize();
window.addEventListener('resize', updateSize, false);
loop();
window.addEventListener("mousedown", function(e)
pushBalls(randBetween(10, 20), e.clientX, e.clientY);
document.body.classList.add("is-pressed");
longPress = setTimeout(function()
document.body.classList.add("is-longpress");
longPressed = true;
, 500);
, false);
window.addEventListener("mouseup", function(e)
clearInterval(longPress);
if (longPressed == true)
document.body.classList.remove("is-longpress");
pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
longPressed = false;
document.body.classList.remove("is-pressed");
, false);
window.addEventListener("mousemove", function(e)
let x = e.clientX;
let y = e.clientY;
pointer.style.top = y + "px";
pointer.style.left = x + "px";
, false);
else
console.log("canvas or addEventListener is unsupported!");
function updateSize()
canvas.width = window.innerWidth * 2;
canvas.height = window.innerHeight * 2;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.scale(2, 2);
width = (canvas.width = window.innerWidth);
height = (canvas.height = window.innerHeight);
origin =
x: width / 2,
y: height / 2
;
normal =
x: width / 2,
y: height / 2
;
class Ball
constructor(x = origin.x, y = origin.y)
this.x = x;
this.y = y;
this.angle = Math.PI * 2 * Math.random();
if (longPressed == true)
this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
else
this.multiplier = randBetween(6, 12);
this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
this.r = randBetween(8, 12) + 3 * Math.random();
this.color = colours[Math.floor(Math.random() * colours.length)];
update()
this.x += this.vx - normal.x;
this.y += this.vy - normal.y;
normal.x = -2 / window.innerWidth * Math.sin(this.angle);
normal.y = -2 / window.innerHeight * Math.cos(this.angle);
this.r -= 0.3;
this.vx *= 0.9;
this.vy *= 0.9;
function pushBalls(count = 1, x = origin.x, y = origin.y)
for (let i = 0; i < count; i++)
balls.push(new Ball(x, y));
function randBetween(min, max)
return Math.floor(Math.random() * max) + min;
function loop()
ctx.fillStyle = "rgba(255, 255, 255, 0)";
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < balls.length; i++)
let b = balls[i];
if (b.r < 0) continue;
ctx.fillStyle = b.color;
ctx.beginPath();
ctx.arc(b.x, b案例：网页轮播图