欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery实现炫酷的鼠标轨迹特效

程序员文章站 2023-11-08 09:44:46
jquery实现炫酷的鼠标轨迹特效,代码: 代码如下:

jquery实现炫酷的鼠标轨迹特效,代码:

代码如下:


<!doctype html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>jquery实现炫酷的鼠标轨迹特效</title><base target="_blank" />
<script type="text/javascript"> window.onload = function () {
c = math.cos; s = math.sin; u = 0; w = window; j = document; d = j.getelementbyid("kele"+"yi_com"); c = d.getcontext("2d"); w = d.width = w.innerwidth; h = d.height = w.innerheight; c.fillrect(0, 0, w, h); c.globalcompositeoperation = "lighter"; c.linewidth = 0.2; c.linecap = "round"; var bool = 0, t = 0; d.onmousemove = function (e) {
if (window.t) {
if (d == 9) { d = math.random() * 15; f(1); }
cleartimeout(t);
}
x = e.pagex; y = e.pagey; a = 0; b = 0; a = x, b = y; r = (e.pagex / w * 999 >> 0) / 999; r = (e.pagey / h * 999 >> 0) / 999; u = e.pagex / h * 360 >> 0; d = 9; g = 360 * math.pi / 180; t = setinterval(f = function (e) {
c.save(); c.globalcompositeoperation = "source-over"; if (e != 1) { c.fillstyle = "rgba(0,0,0,0.02)"; c.fillrect(0, 0, w, h); }
c.restore(); i = 25; while (i--) {
c.beginpath(); if (d > 450 || bool) {
if (!bool) { bool = 1; }
if (d < 0.1) { bool = 0; }
t -= g; d -= 0.1;
}
if (!bool) { t += g; d += 0.1; }
q = (r / r - 1) * t; x = (r - r) * c(t) + d * c(q) + (a + (x - a) * (i / 25)) + (r - r); y = (r - r) * s(t) - d * s(q) + (b + (y - b) * (i / 25)); if (a) { c.moveto(a, b); c.lineto(x, y) }
c.strokestyle = "hsla(" + (u % 360) + ",100%,50%,0.75)"; c.stroke(); a = x; b = y;
}
u -= 0.5; a = x; b = y;
}, 16);
}
j.onkeydown = function (e) { a = b = 0; r += 0.05 }
d.onmousemove({ pagex: 300, pagey: 290 })
}</script>
<style>body{margin:0;overflow:hidden}p{padding:1px 5px;background:#333;position:absolute;z-index:2;color:#555;font-family:arial}a{color:#ccf}a:hover{color:red}</style>
</head>
<body>
<p id="text"></p>
<canvas id="keleyi_com"></canvas>
</body>
</html>

以上就是本文的内容了,希望小伙伴们喜欢此特效,快过年了,给自己的个人主页增添些色彩吧。